Introduction

Introduction >

Introduction

 Return to chapter overview

Cette aide en ligne est un guide opérationnel pour ceux qui veulent commencer à travailler immédiatement avec WebSite X5 pour créer leur site, Blog ou boutique e-commerce.

En suivant étape par étape le chemin de développement proposé, on obtient une description précise de l'interface du programme, de toutes les commandes et des options présentes dans les menus, les panneaux et les fenêtres prévues.

Les explications et les approfondissements proposés, associés au caractère intuitif de la logique de travail et à la disponibilité de nombreux aperçus mis à jour en temps réel, permettront de mieux travailler avec WebSite X5 et d'obtenir des sites attrayants, très prenants et professionnels.

Ce guide de WebSite X5 se réfère à la version Evolution v. 10 mais, si l'on tient compte des limitations spécifiques, sa consultation est utile même pour travailler avec d'autres versions du programme.

Plus précisément, le guide est divisé selon les sections suivantes:

- | Environnement de travail Montre toutes les fonctionnalités offertes par le logiciel dans différentes fenêtres qui sont présentées lors de la création et de la publication d'un site.
- | Bonnes pratiques Il propose des tutoriels utiles qui simulent certaines des procédures pour résoudre des tâches spécifiques comme la création d'un formulaire pour collecter les données ou la création d'une zone réservée par mot de passe.
- | Approfondissements Il s'agit de sections d'approfondissement sur différents thèmes liés à la création d'un site Web.

Dernière mise à jour: version 10


Présentation de WebSite X5

Introduction >

Présentation de WebSite X5

 Return to chapter overview

Créez des sites web, boutiques en ligne et blog en 5 étapes

WebSite X5 est le logiciel idéal pour créer les Sites Web que vous avez toujours voulu avoir. Il ne demande aucune connaissance de programmation et il vous permet de travailler de manière entièrement visuelle à travers une interface intuitive et riche en aperçus, qui sont mises à jour en temps réel.

Ainsi, WebSite X5 vous guide jusqu'à la publication du site en assurant simplicité d'emploi, flexibilité et grands espaces de personnalisation.

En fonction des choix effectués et des paramètres définis, WebSite X5 crée automatiquement le code des pages HTML5 + CSS 2.1 ou 3 en assurant la pleine compatibilité avec tous les navigateurs et les dispositifs mobiles, ainsi qu'une indexation correcte de la part des moteurs de recherche.

Outils Web professionnels

Bien qu'il soit simple à utiliser, WebSite X5 vous offre une large gamme d'outils professionnels pour:

§Boutiques en ligne avec carte de crédit

§Blog avec Podcast et Videocast

§Moteur de recherche interne

§Formulaires e-mail avec filtres anti-spam

§Nouvelles et Flux RSS

§Zoom et images panoramiques

§Galeries d'images et vidéos

§Gestion des accès

§Gestion des bannières publicitaires

§Création de sites multi-langue

Une solution tout-en-un

En plus, WebSite X5 permet d'économiser du temps et de la fatigue car il comprend tout ce qu'il faut pour créer un site:

§Éditeur pour les Modèles

§Éditeur pour les images

§Créateur de menus

§Moteur FTP interne

§1.500 modèles personnalisables

§6.000 images libres de droits

§Librairie de boutons

§Collection de Widgets

Ce mélange de simplicité et d'exhaustivité est la raison du succès de WebSite X5: le bon logiciel pour tous ceux qui veulent créer des sites Web.


WebSite X5: A quoi sert-il ?

Incomedia WebSite X5: A quoi sert-il ?

Introduction >

Incomedia WebSite X5: A quoi sert-il ?

 Return to chapter overview

Incomedia WebSite X5 permet de construire de façon simple et rapide des sites Web, des Paniers virtuel E-commerce, des Blogs, des albums photos numériques et des présentations interactives. Les projets peuvent être développés à travers une structure arborescente composée de menus à plusieurs niveaux: ainsi le nombre de pages pouvant être insérées devient pratiquement illimité.

L'utilisateur peut définir la mise en page de chaque page et la compléter en insérant les objet proposés par le programme: textes, images, tableaux, animations Flash™, vidéos, sons, galeries, objets HTML, formulaires d'envoi de mail, réseaux sociaux, Livre d'Or, Plans, Liste des Produits et Widgets.

WebSite X5 présente de nombreuses fonctions intéressantes pour l'édition des images ne requérant pas l'utilisation d'un logiciel graphique externe. Grâce à l'enregistrement automatique des images au format comprimé, l'utilisateur ne doit pas se soucier d'optimiser les photos avant de les insérer.

Un vaste dossier de modèles graphiques, l'éditeur interne de boutons tridimensionnels, de nombreuses possibilités de personnalisation graphique, l'introduction d'une page d'accueil, l'organisation du choix des langues de consultation, la création d'une zone à accès réservé par mot de passe, la possibilité de créer et de gérer des Blogs, des Flux RSS et des magasins en ligne avec paiement par carte de crédit enrichissent le site et le rendent complet et professionnel.

WebSite X5 permet de publier directement sur le réseau le projet réalisé, sans avoir recours à un logiciel FTP externe.

Travailler avec WebSite X5

WebSite X5 opère comme un assistant qui vous guide à travers le processus en s'assurant que vous complétiez toutes les étapes nécessaires pour que votre site ait un aspect professionnel et soit esthétiquement satisfaisant.

Les étapes nécessaires pour la création de votre site sont 5 en tout:

1. Paramètres généraux

Après avoir choisi le projet sur lequel vous voulez travailler et avoir inséré quelques informations indispensables, entre autres la Description et les Mots Clés nécessaires à l'indexation sur les moteurs de recherche, WebSite X5 vous permet de définir l'aspect graphique du site. Vous pouvez choisir parmi plus de 1.500 modèles prédéfinis ou libérer votre créativité et définir un modèle ex novo. L'éditeur interne permet de personnaliser librement l'en-tête et le pied de page des modèles.

2. Création du plan

À partir de la page d'accueil, WebSite X5 permet de définir la structure arborescente du site. Vous pouvez prévoir tous les niveaux de détail nécessaires pour organiser un nombre illimité de pages. Le menu de navigation sera créé dynamiquement en fonction du plan. Vous pourrez, à tout moment, modifier le plan du site pour le mettre à jour.

3. Création des pages

Pour créer une page et la mettre en page, faites glisser simplement les objets voulus dans la page: textes, tableaux, images, animations, vidéos et audio, galeries, formulaires de collecte des données et d'envoi de mail, liste des produits, code HTML et Widget. Les objets importants peuvent être personnalisés et complétés par des liens vers des ressources internes et externes. Grâce à un éditeur graphique intégré, vous pourrez faire pivoter l'image, corriger ou appliquer des filtres, des masques et des cadres sur les images importées sans avoir recours à un logiciel extérieur.

4. Paramètres avancés

Pour compléter la personnalisation du site, vous pouvez définir le style d'éléments comme le menu de navigation, les textes, la fenêtre ShowBox et l'e-mail. L'éditeur permet également de créer des boutons tridimensionnels pour lesquels vous pouvez prévoir l'effet qui apparaît lors du passage de la souris (effet mouseover). Par ailleurs, le site peut être complété avec des outils tels que: page d'accueil avec bande sonore et choix de la langue de consultation; zones réservées avec gestion des accès et des utilisateurs; messages publicitaires; flux RSS; blog; panier e-commerce.

5. Exporter

WebSite X5 permet aussi de publier sur Internet le site créé: le programme active une session FTP qui permet de transférer sur le serveur tous les fichiers nécessaires pour afficher le site directement sur le Web. WebSite X5 supporte la connexion sécurisée et permet d'économiser du temps en travaillant en multi-connexion et en publiant seulement les fichiers modifiés.

En plus de la publication sur Internet, vous pouvez exporter le Projet sur un autre disque de votre ordinateur ou créer facilement une copie de sauvegarde.


Différences entre les versions

Versions disponibles

Introduction >

Versions disponibles

 Return to chapter overview

WebSite X5 est disponible dans différentes versions dont voici les principales : Evolution et Compact.

Pour voir les différences entre les versions disponibles, consultez la page : http://www.websitex5.com/compare


L'Environnement de Travail

Environnement de Travail >

L'Environnement de Travail

 Return to chapter overview
Montrer/Cacher le texte caché

Comme il s'agit d'un guide, WebSite X5 propose une série de fenêtres permettant à l'utilisateur d'insérer les informations nécessaires pour créer et publier un site Internet complet, fonctionnel et graphiquement attractif.

Touts les écrans du programme ont la même interface graphique avec une barre d'outils, en haut, en bas et sur le coté, et une fenêtre centrale qui change en fonction de la phase de travail et par conséquence des informations requises.

Cliquez pour etendre/reduire
L'environnement de travail
Cliquez pour etendre/reduire Barre d'outils supérieure

La barre d'outils supérieure contient toutes les commandes qui doivent être toujours à disposition, indépendamment de la phase de travail en cours. Ces commandes sont principalement utilisées pour appeler l'aide en ligne et obtenir des informations sur le programme, pour enregistrer le Projet et en gérer les sauvegardes, et à montrer l'aperçu du projet dans le navigateur local.

§Aide: permet d'afficher l'aide en ligne. La flèche à gauche du bouton Aide permet aussi d'accéder aux commandes:

-Résumé...: permet d'afficher l'aide en ligne.

-Didacticiel vidéo: affiche une série de didacticiels vidéo utiles pour comprendre comment commencer à travailler avec WebSite X5.

-WebSite X5 Gallery: affiche la section WebSite X5 Answers qui rassemble les Sites créés avec WebSite X5 qui ont été signalés directement par leurs auteurs.

-WebSite X5 Templates: affiche la section WebSite X5 Answers dédiée aux Modèles. Elle présente de nouveaux modèles graphiques, créés à la fois par Incomedia et par d'autres auteurs, qui peuvent être consultés et téléchargés gratuitement ou en payant.

-Assistance technique: affiche WebSite X5 Answers, le Site qui offre le Support Technique à WebSite X5. Dans WebSite X5 Answers il est possible consulter les réponses aux questions les plus fréquentes, les didacticiels ou ouvrir un ticket pour une demande d'assistance.

-www.websitex5.com: pour accéder au site Internet de référence du programme WebSite X5.

-Informations sur WebSite X5: pour ouvrir une fenêtre contenant les informations relatives au programme WebSite X5 installé.

§Enregistrer [CTRL + S]: permet d'enregistrer le projet sous le même nom. Le projet est automatiquement stocké dans le Dossier de projets indiqué dans la fenêtre Préférences. La flèche à gauche du bouton Enregistrer permet d'accéder aux commandes:

-Enregistrer à chaque Aperçu: permet d'enregistrer automatiquement le Projet chaque fois que vous utilisez la commande Aperçu pour afficher un aperçu local du site.

-Créer une copie de sauvegarde lors du premier enregistrement du projet: permet de créer automatiquement une copie de sauvegarde du Projet (file Backup.iwprj) uniquement après le premier enregistrement fait dans la session de travail courante.

-Créer copie de sauvegarde lors de chaque téléchargement en amont: permet de créer automatiquement une copie de sauvegarde du Projet (file Uploaded_timestamp.iwprj) avant de procéder à toute publication en ligne du site.

Les copies de sauvegarde créées avec les fonctions Créer une copie de sauvegarde lors du premier enregistrement du projet et Créer copie de sauvegarde lors de chaque téléchargement en amont sont enregistrées dans le sous-dossier Backup indiqué dans Dossier de projets dans la fenêtre Préférences.

Pour créer une copie du Projet, au lieu d'utiliser la commande Enregistrer sous, sélectionnez la commande Dupliquer dans la fenêtre Choix du projet.

-Aperçu: permet d'afficher à travers le Navigateur interne un Aperçu local du Site réalisé.

Si vous sélectionnez l'option Mettre à jour les pages au cours de la modification du Projet dans la fenêtre Préférences, au terme de chaque modification (quand vous cliquez par exemple sur le bouton OK ou sur Suivant), le programme recrée tout ce qui est relatif à la modification. Cela permet de maintenir toujours à jour l'Aperçu du Site en local et de l'afficher sans attendre.

Par ailleurs, il est possible activer l'option Enregistrer à chaque Aperçu de façon qu'au moment de cliquer sur le bouton Aperçu le programme enregistrera aussi le Projet.
Cliquez pour etendre/reduire Barre d'outils latérale

WebSite X5 permet de réaliser un site Internet en 5 étapes. Les boutons situés dans la colonne gauche de la fenêtre du programme indiquent la phase du processus de création du site en cours ou permettent de sauter directement à l'une des phases sans suivre l'ordre proposé.

 | Choix du projet
1. | Paramètres généraux
2. | Création du plan
3. | Création des pages
4. | Paramètres avancés
5. | Exporter
Cliquez pour etendre/reduire Barre d'outils inférieure

La Barre d'outils inférieure propose les commandes nécessaires pour ce déplacer entre les différentes fenêtres du programme:

§Précédent: permet de revenir à la fenêtre précédente pour modifier les configurations déjà effectuées.

§Suivant: permet de passer à la fenêtre suivante pour poursuivre la création du Site.


Bienvenue dans WebSite X5

Bienvenue dans Incomedia WebSite X5

Environnement de Travail >

Bienvenue dans Incomedia WebSite X5

 Return to chapter overview

Cette fenêtre de bienvenue apparaît quand vous lancez WebSite X5 et elle vous propose des liens vers des ressources et le matériel en ligne utiles pour travailler au mieux avec le logiciel. Plus précisément, ces liens sont présentés à travers différents boutons organisés dans un panneau latéral:

Didacticiel vidéo: affiche une série de didacticiels vidéo utiles pour comprendre comment commencer à travailler avec WebSite X5.

WebSite X5 Galerie: affiche la section WebSite X5 Answers qui rassemble les Sites créés avec WebSite X5 qui ont été signalés directement par leurs auteurs.

WebSite X5 Modèles: affiche la section WebSite X5 Answers dédiée aux Modèles. Elle présente de nouveaux modèles graphiques, créés à la fois par Incomedia et par d'autres auteurs, qui peuvent être consultés et téléchargés gratuitement ou en payant.

WebSite X5 Réponses: affiche WebSite X5 Answers, le Site qui offre le Support Technique à WebSite X5. Dans WebSite X5 Answers il est possible consulter les réponses aux questions les plus fréquentes, les didacticiels ou ouvrir un ticket pour une demande d'assistance.

Recherche de mise à jour: vérifiez la disponibilité de mises à jour en ligne pour la version installée de WebSite X5. Nous vous recommandons pour une meilleure expérience de travail, d'installer toujours les mises à jour disponibles.

Préférences: ouvrez la fenêtre Préférences qui permet de définir certains paramètres généraux relatifs au fonctionnement du programme.

Outre ces boutons, la fenêtre de Bienvenue présente des contenus qui peuvent être mis à jour (si la connexion Internet est active) au cours du temps en proposant des sujets comme: informations sur l'état de mise à jour du programme installé, News, contenus spéciaux (Messages d'approfondissement, Livre Blanc, Astuces), nouveaux Didacticiels vidéo, promotions en cours.

Si la connexion Internet n'est pas disponible, la fenêtre de Bienvenue montre une page standard. Cette page s'affiche également si vous désactivez l'option Rechercher des mises à jour au démarrage du programme disponible dans la fenêtre Préférences.

Après avoir exploré les contenus de la fenêtre de Bienvenue, vous pouvez commencer la création d'un site en cliquant sur le bouton Démarrer.


La fenêtre Préférences

Environnement de Travail >

La fenêtre Préférences

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre, rappelée à l'aide du bouton Préférences de la Page de Bienvenue, permet de définir certains paramètres généraux relatifs au fonctionnement du programme.

Cliquez pour etendre/reduire Référence: les commandes de la fenêtre Préférences

Les options disponibles dans la section Général sont:

§Dossier de projets: permet d'indiquer le dossier où sera enregistré le fichier de Projet (fichier Project.IWPRJ), en cas de création d'un nouveau Projet ou d'importation d'un Projet déjà existant (voir Choix du projet | Importer...). Si vous sélectionnez cette option, quand vous cliquerez sur le bouton Enregistrer pendant le travail de développement du site, le Projet sera directement enregistré sans vous demander le dossier de destination.

§Rechercher des mises à jour au démarrage du programme: permet de vérifier automatiquement la disponibilité des mises à jour à chaque lancement du programme. Pour effectuer cette recherche, le programme se connecte au serveur Incomedia via Internet.

Il est conseillé de laisser cette option sélectionnée pour avoir la certitude de travailler toujours avec la version la plus à jour de WebSite X5.

Les options relatives à Création d'un fichier sont:

§Gardez l'Aperçu actualisé tout en travaillant au projet: permet de mettre à jour l'Aperçu du Site constamment, au fur et mesure que le développement du Projet avance. En conséquence, au terme de chaque modification (quand vous cliquez par exemple sur le bouton OK ou sur Suivant), le programme se charge de mettre à jour automatiquement l'Aperçu du Site qui s'affiche dans le Navigateur local.

§Mettre à jour les pages au cours de la modification du Projet: permet de créer les Pages relatives au Site au moment de la modification du Projet. Ainsi, au terme de chaque modification (quand vous cliquez par exemple sur le bouton OK ou sur Suivant), le programme recrée tout ce qui est relatif à la modification. Cela permet de maintenir toujours à jour l'Aperçu du Site en local et de l'afficher avec le bouton Aperçu sans attendre.

§Nombre max de traitements simultanés: permet de définir le nombre de processus (ou Thread) lancés par le programme qui doivent être exécutés simultanément par l'ordinateur.

Qu'est ce-que c'est le Multithreading?

Le partage d'un processus en plusieurs processus exécutés simultanément est nommé Multithreading et, pour fonctionner, il doit être supporté par l'ordinateur. Plus simplement, le Multithread essai d'exploiter au mieux l'unité de calcul de l'ordinateur en lui faisant exécuter plusieurs threads en parallèle. Grâce à cette technique, un programme comme WebSite X5, qui a été développé en partageant la charge de travail en plusieurs threads, peut avoir des améliorations considérables au niveau des performances.

Pour obtenir un avantage réel du Multithreading, vous devez bien évaluer la configuration matérielle de votre ordinateur. Il est conseillé de commencer par 5 processus simultanés et d'augmenter progressivement ce paramètre pour identifier le meilleur nombre répondant à vos exigences.

Enfin, l'Aperçu local des paramètres du WebServeur sur lequel il est possible de travailler sont:

§Port: c'est le port d'écoute du Webserveur local de WebSite X5 pour l'affichage de l'Aperçu du Site.

§Adresse IP: c'est l'adresse IP du Webserveur local de WebSite X5 pour l'affichage de l'Aperçu du Site. Par défaut, il est réglé sur l'adresse IP 127.0.0.1 qui identifie toujours l'ordinateur local.

Nous vous conseillons de ne pas modifier les valeurs de l'option Port et Adresse IP si vous n'êtes pas sûr de ce que vous faîtes.

Bonnes pratiques:

-

Comment gérer la sauvegarde des Projets


Passo 0 - Choix du projet

Choix du projet

Étape 0 - Choix du projet >

Choix du projet

 Return to chapter overview
Montrer/Cacher le texte caché

Une fois lancé WebSite X5, après la Page de Bienvenue initiale, vous accédez à la fenêtre Choix du projet où vous devez indiquer le Projet sur lequel vous voulez travailler.

Vous pouvez choisir si créer un nouveau Projet ou modifier un Projet existant.

Cliquez pour etendre/reduire Référence: les commandes de la fenêtre Choix du projet

§Créer un nouveau Projet: vous procédez à la réalisation d'un nouveau Site dont vous devez indiquer immédiatement le nom dans le champ situé au-dessous. Pour enregistrer le Projet créé, cliquez sur le bouton Enregistrer situé dans la barre d'outils supérieure.

Pendant les opérations d'enregistrement, vous ne devez pas indiquer le chemin car les Projets sont automatiquement gérés par le Programme et enregistrés dans le Dossier de projets défini à travers la fenêtre Préférences.

§Modifier un Projet existant: si vous sélectionnez cette option, vous ouvrez un Projet créé précédemment afin de le modifier ou le mettre à jour. Tous les projets déjà existants sont affichés dans la liste appropriée. Pour sélectionner plus facilement le Projet à ouvrir, vous disposez des commandes suivantes:

Afficher de grandes icônes - Afficher les titres - Afficher la liste - Afficher les détails

permettent de définir la modalité d'affichage des aperçus des Projets.

Afficher les Groupes selon leur dernière date de modification

permet de regrouper tous les Projets et de les afficher en fonction de la date de dernière modification.

La liste des projets existants peut être gérée à travers les commandes suivantes:

§Importer...: permet d'importer un Projet déjà créé et exporté (voir, Exporter le Projet) avec WebSite X5 d'un ordinateur différent.

§Renommer: permet de modifier le nom du Projet sélectionné. Il est aussi possible de cliquer une deuxième fois sur un Projet déjà sélectionné pour le renommer.

§Dupliquer: permet de créer une copie du Projet sélectionné.

§Supprimer: permet de supprimer le Projet sélectionné.

Bonnes pratiques:

-

Comment gérer la sauvegarde des Projets


Paramètres généraux

Étape 1 - Paramètres généraux >

Paramètres généraux

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre initiale, la première de l'étape 1, sert à collecter dans des champs appropriés certaines informations nécessaires pour configurer les paramètres de base du Projet sur lequel vous êtes en train de travailler.

Il est important, par exemple, de définir un titre, d'indiquer l'URL, de définir une langue et de prévoir les codes et les Méta tags nécessaires pour activer des services supplémentaires comme celui des statistiques d'accès.

Tous ces paramètres peuvent être définis immédiatement ou par la suite.

Plus précisément, les options disponibles sont organisées en deux sections: Générales et Avancées.

Cliquez pour etendre/reduire Référence: Les options de la Section Générales

§Titre du site: dans ce champ, tapez le titre du site. Ce titre qui est affiché dans la barre de titre du Navigateur est, bien évidemment, un paramètre important pour permettre aux utilisateurs et aux moteurs de recherche d'identifier correctement le site. Comme titre du site, le programme prend automatiquement le nom affecté au projet (voir Choix du projet): en tout cas, le titre du site peut être modifié et établi en fonction du sujet traité et des exigences d'optimisation spécifiques.

§Auteur du site: champ où vous tapez le nom de la personne ou de la société étant l'auteur du site. Le nom de l'auteur est indiqué dans le code HTML des pages réalisées comme valeur du Méta tag <author>: vous mettez ainsi votre signature sur votre travail.

§Adresse Url du site: tapez l'adresse URL (par exemple, http://www.monsite.fr) à laquelle le site sera disponible après sa publication. Cette information est nécessaire pour le bon fonctionnement d'éventuels Flux RSS, du Panier de e-commerce et du Plan du Site qui est automatiquement créé et relié par le programme.

§Description du site: tapez une brève description de votre site. La description du site doit être succincte, efficace et précise: elle sera en effet utilisée dans le code HTML comme contenu du Méta tag <description> et sera analysée par les spiders des moteurs de recherche.

§Mots-clé pour la recherche: dans ce champ, vous pouvez entrer une liste de mots clé (séparés par une virgule) qui sont importants pour le site. Les mots-clé seront insérés dans le code HTML comme valeur du Méta tag <keywords> et pourront être utilisés par les moteurs de recherche.

La Description du site et la liste des Mots-clé pour la recherche insérés dans ces champs sont automatiquement associées à la page d'accueil du site.

Pour optimiser le site, il est conseillé d'associer à chaque page, ou au moins aux plus importantes, une description et une liste des mots-clé spécifiques. Pour ce faire, accédez à la fenêtre Création du plan, sélectionnez la page voulue et cliquez sur la commande Propriétés.

§Langue du contenu: vous définissez la langue du site. Selon la langue choisie, le programme utilise la version relative des textes qu'il insère automatiquement: des liens vers des ancres internes, des étiquettes de l''Objet Formulaire d'envoi d'email, des étiquettes et des textes du Panier e-commerce, des textes du Plan du Site.

Pour modifier les textes insérés automatiquement par le programme ou ajouter une nouvelle langue, cliquez sur le bouton [image] et utilisez les options de la fenêtre Gestion du contenu linguistique.

§Icône du site: ce champ permet de choisir une icône (fichier .ICO, .PNG, .GIF et .JPG) à associer aux pages Web du site. Cette icône sera affichée à gauche de l'URL dans la barre d'adresses du navigateur Internet.

Comme icône associée à un site (ou favicon, de l'anglais favorites icon), vous pouvez utiliser une image au format .ICO, .PNG, .GIF et .JPG. Alors que les fichiers .ICO sont utilisés tels qu'ils sont, pour les fichiers au format .PNG, .GIF et .JPG, de n'importe quelle taille, WebSite X5 crée automatiquement une copie en fichier .PNG de 16x16 pixels et utilise cette copie comme favicon.

Cliquez pour etendre/reduire Référence: Les options de la section Avancées

§Code personnalisé: définit la position dans le code HTML de la Page où il faut insérer le code personnalisé: Avant la balise <HTML>, Avant la balise </HEAD>, Propriétés de la balise BODY (ex. Style, onload, etc.) (à savoir à l'intérieur de l'instruction <BODY>, par exemple: <BODY onload="alert(('Bonjour le monde!') " >), Avant la balise </BODY>, Après la balise </BODY>. La position étant sélectionnée, vous disposez d'un champ où vous devez saisir ou coller la portion de code à insérer à l'intérieur du code HTML de la Page créée automatiquement par le Programme.

Ce champ peut-être utilisé, par exemple, pour activer un service de statistiques des accès au Site comme Google Analytics™.

Pour plus d'informations sur le service Google Analytics™ et pour créer un compte, cliquez sur le bouton [image] et accédez au Site officiel: http://www.google.it/analytics/.

§Méta Tag de vérification pour Google WebMaster Central: tapez le Méta tag de vérification nécessaire pour pouvoir utiliser les outils offerts par Google Webmaster Central™.

Pour plus d'information sur le service Google WebMaster Central™ et pour obtenir un comte, cliquez sur le bouton [image] et accédez au Site officiel: http://www.google.com/webmasters/.

§Créer automatiquement le SiteMap: activée par défaut, elle permet de créer et de lier automatiquement le Plan du Site.

Afin que le Plan du Site soit construit et fonctionne correctement il est nécessaire d'indiquer une adresse URL valide Adresse Url du site présente dans Paramètres généraux | Générales.

§Activer la protection d'accès code HTML: si vous sélectionnez cette option, les pages du site publiées sont protégées en désactivant le clic du bouton droit de la souris. Ainsi l'utilisateur ne peut pas accéder au code source des pages en ligne à travers les commandes du menu popup en cliquant avec le bouton droit de la souris sur les pages même.

Bonnes pratiques:

- | Comment gérer les Langues pour les textes insérés automatiquement
- | Que faire pour pouvoir utiliser Google Webmaster Central™
- | Comment activer un service de statistiques comme Google Analytics™

-

Comment créer et connecter le Plan du Site

Approfondissements:

-

Le navigateur Web et le navigateur de WebSite X5


Fenêtre Gestion du contenu linguistique

Étape 1 - Paramètres généraux > Paramètres généraux >

Fenêtre Gestion du contenu linguistique

 Return to chapter overview

Cette fenêtre, appelée par le bouton [image] relatif à l'option Langue du contenu présente dans la fenêtre Paramètres généraux | Générales, permet de gérer les textes qui sont insérés automatiquement dans le Programme comme, par exemple, les liens aux Ancres internes, les Boutons de l'Objet de la galerie, les étiquettes de l'Objet Formulaire d'envoi d'email, les étiquettes et les textes du Panier e-commerce, les textes du Plan du Site.

La fenêtre Gestion du contenu linguistique propose, à gauche, la liste des langues disponibles et, à droite, un tableau contenant les traductions en différentes Langues. La première colonne du tableau montre une description utile pour identifier où sont utilisées les différentes rubriques; il y a ensuite une colonne pour chaque Langue active. L'expression Langue active correspond à la Langue cochée parmi celles présentes dans la liste des Langues disponibles. Vous pouvez donc travailler directement sur ce tableau pour modifier ou ajouter des rubriques.

La fenêtre Gestion du contenu linguistique présente les boutons suivants:

Ajouter une nouvelle langue: permet d'insérer, dans la boîte de dialogue qui apparaît, le nom d'une nouvelle langue à créer. Le nom de la langue doit être inséré en respectant le format suivant: "ID - NomLangue", par exemple "EN - English".

Supprimer la langue sélectionnée: permet de supprimer la langue sélectionnée dans la liste.

Ajouter une nouvelle langue: importez une nouvelle langue, enregistrée dans un fichier .XML, et ajoutez-la à la liste des langues disponibles.

Exporter la langue sélectionnée: exportez la langue sélectionnée de la liste dans un fichier .XML.

Les commandes Exporter la langue sélectionnée et Ajouter une nouvelle langue sont utiles pour enregistrer dans un fichier .XML les éléments localisés dans une langue particulière et pour les déplacer sur un ordinateur différent.

Bonnes pratiques:

- | Comment gérer les Langues pour les textes insérés automatiquement
- | Comment créer un Site multilingue


Sélection du modèle

Étape 1 - Paramètres généraux >

Sélection du modèle

 Return to chapter overview
Montrer/Cacher le texte caché

L'un des facteurs qui concourt à déterminer le succès d'un site web est sûrement l'aspect graphique. Avant d'arriver aux contenus et à la structure de navigation, l'aspect du site frappe en effet le visiteur, en influençant de manière déterminante son jugement. Un design soigné et professionnel est interprété comme l'indice d'un site de qualité et qui vaut la peine d'approfondir ses contenus.

WebSite X5 permet de définir l'aspect du site en deux façons:

1. en créant un Modèle Personnalisé à partir de zéro ou d'un des modèles prédéfinis;

2. en utilisant un Modèle Prédéfini choisi de la galerie de plus de 1.500 modèles déjà installés dans le Programme.

Tous les modèles personnalisés et prédéfinis peuvent être complétés et enrichis grâce aux fonctions mises à disposition par l'Éditeur qui se trouve dans la fenêtre Modifier le modèle.

Tous les Modèles Prédéfinis sont optimisés pour un affichage en 1024 x 768 pixels. Si vous voulez créer un site optimisé avec une résolution différente, vous devez utiliser le Modèle personnalisé.
Cliquez pour etendre/reduire Référence: les commandes de la fenêtre Sélection du modèle

L'affichage de la fenêtre Sélection du modèle est dédiée à l'affichage des Modèles disponibles. Pour faciliter le choix du Modèle à utiliser, vous pouvez utiliser les commandes suivantes pour définir quels sont les Modèles et la façon dont ils doivent être affichés:

Liste Catégories

Propose la liste des Catégories dans lesquelles les Modèles sont organisés, afin de vous permettre de choisir lesquels afficher. La première Catégorie Personnalisée comprend tous les Modèles Personnalisés qui sont créés à partir de zéro et elle ne s'affiche que si est présent au moins un modèle. Les catégories suivantes contiennent les Modèles Prédéfinis disponibles.

Menu

Filtre les Modèles Prédéfinis selon le type de Menu présenté, afin de permettre de choisir ceux affichés avec un menu horizontal, vertical ou tous les deux.

Montrer un petit aperçu - Montrer un moyen aperçu - Montrer un grand aperçu

Définissent la façon d'afficher les aperçus des Modèles.

Modifier la tonalité du Modèle

Appelle la fenêtre Modèle Teinte pour modifier les couleurs du Modèle sélectionné vers la tonalité définie.

Pour travailler sur les Modèles il est possible d'utiliser les commandes suivantes:

§Nouveau modèle: lancez la création d'un nouveau Modèle Personnalisé à partir de zéro. Les Modèles ainsi créés sont proposés dans la catégorie Personnalisée.

§Renommer: renommez le Modèle sélectionné. La commande est uniquement disponible pour les Modèles Personnalisés: vous ne pouvez pas changer le nom des Modèles Prédéfinis. Vous pouvez également cliquer une deuxième fois sur un Modèle Personnalisé déjà sélectionné pour le renommer.

§Dupliquer: créez une copie du Modèle sélectionné.

§Supprimer: supprimez le Modèle sélectionné. La commande est disponible seulement pour les Modèles Personnalisés: on ne peut pas supprimer les Modèles Prédéfinis.

§Modifier: ouvrez le Modèle sélectionné dans la fenêtre Modifier le modèle, afin de pouvoir le modifier. La commande est disponible seulement pour les Modèles Personnalisés: si vous voulez modifier un Modèle Prédéfini vous devez avant tout en créer une copie par le bouton Dupliquer.

§Importer: importez un nouveau Modèle (fichier .IWTPL) créé avec WebSite X5 et exporté grâce à la fonction dédiée.

§Exporter: exportez le Modèle sélectionné (fichier .IWTPL) dans le répertoire spécifié. Le modèle ainsi exporté peut être partagé et importé sur d'autres ordinateurs.

Remarques sur la compatibilité avec les versions précédentes:

§Menu Horizontal / Vertical - Alors que dans les versions précédentes le choix entre Menu horizontal et vertical venait en fait dans la fenêtre Sélectionnez le type de menu (jusqu'à la version 8) ou par une option dédiée (dans la version 9), dans la version 10 il suffit de sélectionner le Modèle Prédéfini qui fournit le menu positionné correctement. Si vous créez un Modèle Personnalisé, cependant, vous devez définir le Type de menu par l'option appropriée.

§Variantes - Dans la version 8, pour chaque Modèle prédéfinis étaient disponibles 4 variantes de couleur. Dans la version 9 les variantes de couleurs ont été remplacés par des variations de style qui diffèrent des premières, car non seulement elles proposent des palettes de couleurs différentes, mais également des paramètres et éléments graphiques différents. Dans la version 10 actuelle, on n'a plus maintenu la distinction en variantes de style: tous les modèles se distinguent par la présence d'éléments et/ou des paramètres spécifiques et sont inclus dans la liste d'ensemble.

Bonnes pratiques:

- | Comment travailler avec les Modèles
- | Ou trouver de nouveaux Modèles pour WebSite X5


Fenêtre Modèle Teinte

Sélection du modèle | Modèle Teinte

Étape 1 - Paramètres généraux > Sélection du modèle >

Sélection du modèle | Modèle Teinte

 Return to chapter overview

Cette fenêtre, appelée par le bouton [image] présente dans la fenêtre Sélection du modèle, permet de changer la tonalité désirée du Modèle Prédéfini ou Personnalisé sur lequel vous travaillez.

Pour régler la tonalité vers laquelle les couleurs du Modèle doivent se tourner, il suffit de déplacer le curseur de la commande Tonalité .

Avec cette option, les variantes graphiques d'un Modèle deviennent potentiellement infinies.

Le changement de couleur affecte toutes les composantes du Modèle, mais n'a pas d'effet visible sur les couleurs comme le blanc, le noir et les nuances de gris.

Bonnes pratiques:

- | Comment travailler avec les Modèles
- | Ou trouver de nouveaux Modèles pour WebSite X5


Modèle personnalisé

Étape 1 - Paramètres généraux >

Modèle personnalisé

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 permet de créer un Modèle de style personnalisé à partir d'une base vierge: pour ce faire, cliquez sur le bouton Nouveau modèle dans la fenêtre Sélection du modèle afin d'afficher l'aperçu d'un nouveau Modèle dans la catégorie Personnalisés: double cliquez directement sur l'aperçu, vous accédez à la fenêtre Modèle personnalisé et vous pouvez procéder à la création du Modèle.

Pour faciliter le travail, la fenêtre Modèle personnalisé offre un Aperçu montrant une représentation schématique de la Page. Vous pouvez choisir la section à modifier dans la liste ou cliquer directement sur les différentes zones de la structure dans l'Aperçu de la page pour les sélectionner, modifier leur aspect à l'aide des commandes appropriées et voir immédiatement le résultat des actions exécutées.

Cliquez pour etendre/reduire Référence: les commandes pour définir le Type de Menu

Pour créer un Modèle personnalisé, vous devez indiquer tout d'abord le Type de menu, à savoir à quel endroit et dans quel sens doit être positionné le menu de navigation à l'intérieur des pages du site. Les possibilités sont:

Horizontal – Menu au-dessus de l'en-tête

Horizontal – Menu sous l'en-tête

Vertical - Menu à gauche

Vertical - Menu à droite
Cliquez pour etendre/reduire Référence: les commandes pour sélectionner les Sections de la Page

Après avoir choisi le type de menu, sélectionnez la Section de page sur laquelle vous voulez travailler. Voici les sections de la page:

Arrière-plan de la page: c'est la zone externe de la page qui est affichée quand la fenêtre du navigateur est ouverte avec une taille dépassant la résolution du site.

Arrière-plan d'en-tête: c'est la partie de l'Arrière-plan de la page qui se trouve derrière l'En-tête.

En-tête: c'est l'en-tête, ou bannière supérieure, une section principalement graphique idéale pouvant contenir des éléments tels que le titre et le sous titre du site, le logo de la compagnie, des champs de recherche, le menu de service avec des liens, par exemple pour afficher le Plan ou choisir la langue de consultation.

Menu: c'est la zone destinée à accueillir la navigation fixe, à savoir les éléments de premier niveau du menu qui ne changent pas dans chaque page du site. Bien évidemment, la position de cette zone change en fonction de la structure du site choisi.

Contenu de la page: c'est la zone destinée à accueillir le contenu des pages et, éventuellement, les sous-menus de navigation.

Pied de page: c'est le pied de page, une autre section principalement graphique qui a pour but de terminer visuellement la page. En général, cette zone contient des éléments comme des remarques, des avis de non-responsabilité, le copyright, le code Siret, des adresses e-mail.

Arrière-plan du pied de la page: c'est la partie de l'Arrière-plan de la page qui se trouve derrière à le Pied de page.

Si vous définissez l'Arrière-plan d'en-tête ou l'Arrière-plan du pied de la page comme Transparent, ceux-ci sont considérés comme faisant partie intégrante de l'Arrière-plan de la page et ils auront le même aspect. Autrement, vous obtenez des bandes pour l'En-tête et/ou le Pied de page qui occupent toute la largeur de la fenêtre du navigateur.
Cliquez pour etendre/reduire Référence: les options pour définir les Propriétés graphiques

Pour toutes les sections de la Page, vous pouvez utiliser les Propriétés graphiques suivantes:

§Couleur: spécifie la couleur à utiliser comme remplissage d'arrière-plan.

§Fichier image: sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan. Dans le cas de l'En-tête ou du Pied de page il est possible de prévoir aussi une animation Flash (.SWF).

§Disposition: permet de définir s'il faut répéter ou non l'image utilisée comme arrière-plan. L'image peut être répétée horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. Par ailleurs, seulement pour la section Arrière-plan de la page, vous pouvez adapter l'image, à savoir la redimensionner pour qu'elle couvre tout l'arrière-plan: dans ce cas, les proportions d'origine ne sont pas respectées.

§Alignement: permet de choisir l'alignement de l'image selon l'aire de la page sélectionnée.

Seulement pour la zone Arrière-plan de la page vous disposez de l'option:

§Image d'arrière-plan fixe: si vous sélectionnez cette option, l'image insérée comme arrière-plan de la page reste fixe même quand vous faites défiler le contenu de la page à l'aide de la barre de défilement.
Cliquez pour etendre/reduire Reference: les options pour définir la Taille

Pour certaines zone de la Page il est possible de spécifier aussi la Taille.

Pour les zones En-tête et Menu l'option suivante est disponible:

§Largeur: indique la valeur exprimée en pixels de la largeur de la zone de la page sélectionnée. Pour le menu Vertical, la Largeur est définie par défaut sur 960 pixels pour la section En-tête et 120 pixels pour la section Menu mais vous pouvez les modifier à votre gré. Pour le menu Horizontal, la Largeur définie pour l''En-tête est automatiquement appliquée au Menu, au Contenu de la page et au Pied de page.

La valeur de la Largeur définie par défaut est calculée pour obtenir un Site optimisé pour un affichage de 1024x768 pixels.

Pour toutes les zones, à l'exception de l' Arrière-plan de la page et du Contenu de la page, l'option suivante est disponible:

§Hauteur: indique la valeur exprimée en pixels de la hauteur de la zone de la page sélectionnée.

Seulement pour la zone Contenu de la page est disponible l'option:

§Hauteur minimum: indique la valeur exprimée en pixels de la hauteur minimum que la zone de la page destinée à contenir les contenus doit avoir, quelle que soit la hauteur des contenus réellement insérés.
Cliquez pour etendre/reduire Référence: les options pour définir les Propriétés des contenus

Enfin, toujours pour certaines zones de la Page seulement il est possible d'afficher des Propriétés contenu.

Pour les sections Arrière-plan de la page, Menu et Contenu de la page vous disposez de l'option:

§Marges: indique la valeur exprimée en pixels pour définir les marges. La marge est l'espace blanc entre le bord de la section et son contenu.

Seulement pour les sections Arrière-plan de la page et Menu est disponible cette option:

§Alignement: pour l' Arrière-plan de la page, il défini comment doit être alignée la Page par rapport à la fenêtre du navigateur; pour le Menu, il défini comment doivent être alignés les boutons qui le composent par rapport à la Page.

La largeur effective de la page du site est donnée par la largeur de la section du Contenu de la page (qui dépend de la largeur de l'En-tête) à laquelle il faut soustraire la marge gauche et la marge droite.

L'en-tête du modèle réalisé peut être complété en insérant des textes, des images, des animations Flash, des diaporamas, des champs de recherche et des liens: les options nécessaires sont présentées dans la fenêtre Modifier le modèle que vous rappelez en cliquant sur le bouton Suivant.

Bonnes pratiques:

- | Comment travailler avec les Modèles
- | Ou trouver de nouveaux Modèles pour WebSite X5


Modifier le modèle

Étape 1 - Paramètres généraux >

Modifier le modèle

 Return to chapter overview
Montrer/Cacher le texte caché

Après avoir choisi l'un des modèles prédéfinis dans la fenêtre Sélection du modèle ou avoir créé un modèle ex novo dans la fenêtre Modèle personnalisé, vous accédez à la fenêtre Modifier le modèle. Les sections En-tête et Pied de page de cette fenêtre permettent de personnaliser, respectivement, l'en-tête et le pied de page du modèle en ajoutant des textes, des images, des animations Flash, des diaporamas, un code HTML, des champs de recherche et des liens.

Quand vous travaillez sur l'image de l'En-tête ou celle du Pied de page, les commandes et les options disponibles sont identiques.

Dans les sections En-tête ou Pied de page, si vous insérez comme arrière-plan une animation Flash, la fenêtre Modifier le modèle ne permet pas de la personnaliser.
Cliquez pour etendre/reduire Référence: comment se présente l'éditeur du Modèle

La fenêtre Modifier le modèle présente un éditeur graphique où, sous la barre d'outils, le programme prend automatiquement l'image utilisée comme arrière-plan de l'En-tête ou du Pied de page du modèle choisi (aussi bien prédéfini que personnalisé): l'image est affichée à l'échelle 1:1 et vous pouvez, si nécessaire, la faire défiler à l'aide de barre de défilement horizontal. Le programme montre en temps réel toutes les modifications effectuées sur cette image à travers les commandes disponibles.

Sous l'image chargée se trouve une barre d'état qui indique:

§Position: affiche les coordonnées x et y qui identifient la position de l'angle supérieur droit de l'objet sélectionné.

§Taille: affiche la valeur exprimée en pixels de la largeur et de la hauteur de l'objet sélectionné.
Cliquez pour etendre/reduire Référence: les commandes de la Barre d'Outils

Les commandes de la Barre d'Outils permettent d'insérer de nouveaux Objets dans l'En-tête / Pied de page du Modèle et de gérer certains paramètres. Une fois inséré un Objet avec la commande dédiée, il est possible le sélectionner et le modifier par les options présentes dans la zone qui porte le nom de l'objet même.

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Permettent, respectivement, de couper, copier et coller l'objet sélectionné.

Annuler [CTRL+Z]

Permet d'annuler la dernière opération.

Mettre au premier plan - Mettre au second plan

Permettent, respectivement, de mettre l'objet sélectionné en premier ou second plan, à savoir au-dessus ou au-dessous des autres objets éventuellement superposés.

Associer un lien

Permet de définir un lien sur le texte, sur l'image ou sur les images du Diaporama sélectionnées. Vous pouvez définir les configurations du lien dans la fenêtre Lien.

Position et taille

Permet de définir, dans la fenêtre rappelée, les coordonnées qui déterminent la position et les dimensions de l'objet sélectionné. L'option Conserver la proportion, activée par défaut, fait en sorte que les opérations de redimensionnement ne changent pas les proportions d'origine de l'objet.

Insérer texte - Insérer image - Insérer animation Flash - Insérer Diaporama - Insérer code HTML - Insérer champ de recherche

Permettent, respectivement, d'insérer un texte, une image, une animation Flash, un diaporama, un code HTML ou un champ de recherche.

Le diaporama est composé d'une séquence d'images qui défilent automatiquement l'une après l'autre: il peut être utile pour créer des bannières publicitaires.

Si vous entrez un code HTML, vous pouvez ajouter n'importe quel type de contenu: ainsi, vous avez bien plus de possibilités que celles offertes par les commandes.

Enfin, le champ de recherche exploite un moteur interne permettant d'exécuter des recherches sur les contenus du site.

Les animations Flash et les objets Code HTML insérés s'affichent seulement quand vous ouvrez le site dans le navigateur.
Cliquez pour etendre/reduire Référence: les commandes de la Zone En-tête / Pied de page

Dans la fenêtre Modifier le modèle, si vous cliquez directement sur l'image d'arrière-plan des sections En-tête et Pied de page, vous la sélectionnez et vous pouvez alors agir sur les options suivantes:

§Enregistrer comme image JPG: lors de la phase de création du site, les objets Texte et Image ajoutés dans l'En-tête/Pied de page seront fondus avec l'image d'arrière-plan utilisée qui sera automatiquement enregistrée comme un nouveau fichier au format PNG. Le choix du format PNG permet de maintenir les éventuelles transparences définies. Si vous ne devez pas gérer des transparences particulières, vous pouvez sélectionner l'option Enregistrer comme image JPG pour obtenir une image d'arrière-plan plus petite.
Cliquez pour etendre/reduire Référence: les commandes de la Zone Texte

Si vous sélectionnez un objet Texte inséré dans les sections En-tête / Pied de page, vous pouvez agir sur les options suivantes:

§Contenu: permet de saisir ou coller le contenu du texte.

§Police: permet de définir le type de police, le style et la taille en points du texte.

§Couleur de texte / Couleur d'arrière-plan: permettent de définir la couleur des caractères et de l'arrière-plan du texte inséré.

§Enregistrer comme image PNG: si activée, elle évite que le texte inséré soit fondu avec l'image d'arrière-plan de l'En-tête/Pied de page mais elle est enregistrée comme une image PNG avec un fond transparent. Dans ce cas, le texte original est automatiquement associé au le texte de remplacement (texte ALT) à l'image PNG.
Cliquez pour etendre/reduire Référence: les commandes de la Zone Image

Si vous sélectionnez un objet Image inséré dans les sections En-tête / Pied de page, vous pouvez agir sur les options suivantes:

§Fichier image: permet de sélectionner le fichier graphique relatif à l'image à insérer. Vous pouvez utiliser les fichiers au format JPG, GIF, PNG, BMP, PSD, TIF, DIB, PCX, RLE, TGA, WMF.

§Fichier image au passage de la souris: permet de sélectionner un deuxième fichier graphique qui sera affiché lors du passage de la souris sur l'image. Cette option est particulièrement utile pour créer des boutons avec l'effet enfoncé/relâché.

§Activer la transparence: si vous sélectionnez cette option, la transparence est appliquée à l'image pour rendre invisible une couleur donnée.

§Transparence : permet de définir la couleur de l'image insérée qui doit devenir invisible quand l'option Activer la transparence est sélectionnée. Dans ce cas, l'outil "compte-gouttes" est particulièrement utile, car il permet de capturer la couleur directement à partir de l'image.

§Tolérance: permet de définir le facteur de tolérance pour appliquer la transparence. Plus la valeur de tolérance est grande, plus la zone de l'image devenue transparente est grande.
Cliquez pour etendre/reduire Référence: les commandes de la Zone Animation Flash

Si vous sélectionnez un objet Animation Flash inséré dans les sectionsEn-tête / Pied de page, vous pouvez agir sur les options suivantes:

§Fichier animation: permet de sélectionner le fichier SWF relatif à l'animation Flash à insérer.

§Arrière-plan transparent: si vous sélectionnez cette option, l'arrière-plan de l'animation devient invisible.
Cliquez pour etendre/reduire Référence: les commandes de la Zone Diaporama

Si vous sélectionnez un objet Diaporama inséré dans les sections En-tête / Pied de page, vous pouvez agir sur les options suivantes:

§Liste des images à afficher: affiche la liste des images composant le Diaporama. Pour chaque image insérée, le programme indique le chemin du fichier ainsi que l'effet et le lien associés (s'ils sont présents). Si vous sélectionnez un fichier de la liste, celui-ci est affiché dans l'aperçu. Vous pouvez aussi effectuer une sélection multiple des fichiers à l'aide des commandes CTRL+clic et SHIFT+clic.

§Ajouter... / Supprimer: permettent, respectivement, d'ajouter de nouvelles images ou de supprimer les images sélectionnées dans la liste de celles composant le diaporama. La fenêtre Sélection Fichier permet de sélectionner plusieurs fichiers simultanément.

§En haut / En bas: permettent, respectivement, de déplacer l'image sélectionnée avant ou après l'image précédente/suivante dans la liste d'images à afficher dans le Diaporama.

§Effet...: permet de rappeler la fenêtre Propriétés de l'effet permettant de définir les effets d'entrée, le mouvement, le zoom pour les images du Diaporama sélectionnées parmi celles présentes dans la liste d'images à afficher.

§Lecture automatique: cette option fait en sorte que le Diaporama parte automatiquement dès que le Site est chargé dans le navigateur.

§Afficher dans un ordre fortuit: si vous sélectionnez cette option, les images insérées dans le Diaporama sont reproduites dans un ordre fortuit et non pas dans l'ordre où elles apparaissent dans la liste d'images à afficher.
Cliquez pour etendre/reduire Référence: les commandes de la Zone Code HTML

Si vous sélectionnez un Code HTML inséré dans la section En-tête / Pied de page, vous pouvez agir sur les options suivantes:

§Code HTML: champ qui permet de saisir ou coller le code HTML relatif à l'objet à créer. La Barre d'Outils met à disposition les commandes suivantes:

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Coupent, copient et collent le texte sélectionné.

Annuler [CTRL+Z] - Restaurer [ALT+MAJUSC+BACKSPACE]

Annulent et restaurent la dernière opération exécutée/annulée.

Inserer Widgets

Insère le code relatif au Widget sélectionné: en cliquant sur la flèche à côté du bouton, il est possible d'afficher la liste de tous les Widgets disponibles, repris dans la liste de l'Objet HTML et Widgets. Si vous cliquez sur le Widget désiré vous rappelez la fenêtre Widget à travers laquelle il est possible de définir les paramètres prévus. Si vous confirmez, le code HTML relatif au Widget se compose et il est automatiquement inséré dans l'éditeur.

§Barres de défilement: toutes les barres de défilement apparaissent sur la page.

Remarques sur la compatibilité avec les versions précédentes:

Dans la version 9 précédente, l'éditeur de ce Code HTML permettait d'insérer automatiquement des Snippets (une courte chaîne de code). Dans la version 10 actuelle, les snippets ont été enrichis et intégrés dans la liste des Widgets.
Cliquez pour etendre/reduire Référence: les commandes de la Zone Champ de recherche

Si vous sélectionnez le Champ de recherche inséré dans les sections En-tête / Pied de page, vous pouvez agir sur les options suivantes:

§Nom du bouton: permet de définir le texte à afficher sur le bouton qui lance la recherche.

§Police: permet de définir le type de police, le style et la taille en points du texte.

§Couleurs du champ: permet de définir la couleur du texte et de l'arrière-plan du champ.

§Couleurs de bouton: permet de définir la couleur du texte et de l'arrière-plan du bouton.

§Si vous insérez un Champ de recherche dans la section En-tête / Pied de page du Modèle, dans le Plan est automatiquement affichée la Page Spéciale "Rechercher": il est possible de la sélectionner et de rappeler la fenêtre Propriétés de page pour définir les propriétés principales.

§Les résultats des recherches effectuées dans le site apparaissent dans des pages créées automatiquement par le programme: l'aspect graphique de ces pages est établi sur la base des paramètres de style des textes (voir Styles et modèles dans l'ètape 4 - Paramètres avancés).
Cliquez pour etendre/reduire Référence: les commandes de la Zone Effets

Si vous sélectionnez un objet Texte, un objet Image ou un objet Diaporama inséré dans le section En-tête / Pied de page, vous pouvez agir sur les options suivantes:

§Type d'effet: permet de sélectionner et d'activer un ou plusieurs effets à appliquer à l'objet sélectionné.

Sur chaque objet Texte, Image et Diaporama, vous pouvez appliquer plusieurs effets simultanément; pour chaque effet, vous pouvez modifier différents paramètres:

Effet

Paramètres

Ombre

§Diffusion: permet de définir jusqu'à quel point l'ombre doit être diffuse.

§Couleur: permet de définir la couleur de l'ombre à appliquer.

§Distance X / Distance Y: permettent de définir jusqu'à quel point l'ombre doit être déplacée horizontalement par rapport à l'objet auquel elle est appliquée. En insérant une valeur positive, vous obtenez un déplacement de l'ombre, respectivement, vers la droite ou le bas; en revanche, si vous tapez une valeur négative, vous obtenez un déplacement de l'ombre vers la gauche ou vers le haut.

Reflet

§Diffusion: permet de définir jusqu'à quel point le reflet doit être diffus, à savoir quelle sera sa grandeur.

§Distance: permet de définir jusqu'à quel point le reflet doit être distant de l'objet auquel il est appliqué..

Bordure colorée

§Épaisseur: permet de définir la valeur en pixels de l'épaisseur de la bordure.

§Couleur: permet de définir la couleur de la bordure à appliquer.

Lueur externe

§Diffusion: permet de définir jusqu'à quel point la lueur doit être diffuse..

§Couleur: permet de définir la couleur de la lueur à appliquer .

Bombé

§Profondeur: permet de définir jusqu'à quel point l'effet bombé doit être accentué..

§Diffusion: permet de définir jusqu'à quel point l'effet bombé doit être diffus..

§Angle: permet de définir l'angle de l'effet bombé à appliquer.

Rotation

§Angle: permet de sélectionner la valeur de l'angle de rotation (effectué dans le sens des aiguilles d'une montre) à appliquer.

Opacité

§Opacité: permet de saisir une valeur de 0 à 255 pour définir le degré d'opacité de l'image. Plus les valeurs se rapprochent du 0, plus l'opacité de l'image devient transparente..

Flou

§Diffusion: permet de définir jusqu'à quel point le flou doit être diffus..

Vague

§Diffusion: permet de définir la grandeur de la vague.

§Fréquence: permet de définir de combien les vagues doivent être rapprochées entre elles.

Perspective

§Horizontale: permet de définir l'angle de fuite pour obtenir un effet de perspective vers la droite (valeurs positives) ou vers la gauche (valeurs négatives).

§Verticale: permet de définir l'angle de fuite pour obtenir un effet de perspective vers le bas (valeurs positives) ou vers le haut (valeurs négatives).

Distorsion

§Horizontale: permet de positionner le point vers lequel vous voulez définir la distorsion le long du plan horizontal, à droite (valeurs positives) ou à gauche (valeurs négatives).

§Verticale: permet de positionner le point vers lequel vous voulez définir la distorsion le long du plan vertical, en haut (valeurs positives) ou en bas (valeurs négatives).

Bonnes pratiques:

- | Comment travailler avec les Modèles
- | Où trouver de nouveaux modèles pour WebSite X5

Approfondissements:

-

Comment fonctionne le moteur de recherche interne de WebSite X5


Création du plan

Étape 2 - Création du plan >

Création du plan

 Return to chapter overview
Montrer/Cacher le texte caché

Un site Web peut être défini comme un ensemble structuré de pages. Définir correctement cette structure est très important car elle détermine comment les pages seront associées entre elles et elle définit les chemins de navigation disponibles portant aux informations.

Une bonne structure permettra à l'utilisateur de ne pas se perdre pendant la navigation, de savoir toujours où il se trouve et de réussir à atteindre, en quelques passages, les informations qu'il recherche. En revanche, une mauvaise structure provoquera une désorientation et de la frustration qui, dans le pire des cas, pousseront l'utilisateur à abandonner le site.

La fenêtre Création du plan permet de définir la structure du site en insérant toutes les pages nécessaires et en les organisant en niveaux et sous-niveaux. Après avoir dessiné le Plan comme une structure vide sans contenus, vous pouvez passer à la création de chaque page. En cliquant plusieurs fois sur le bouton Suivant, vous ouvrez les pages dans le même ordre dans lequelles ont été insérées dans le Plan. Au contraire, il est possible d'utiliser le Plan pour passer directement à la fenêtre du programme qui permet de travailler sur une page : pour ceci, il suffit de double cliquer sur l'élément correspondant ou le sélectionner et cliquer sur le bouton Suivant.

Cliquez pour etendre/reduire Référence: le Plan du Site

Dans la fenêtre Création du plan, la plus grande partie de l'espace est occupée par la représentation schématique du Plan à construire.

Par défaut, le programme propose une structure composée d'un dossier Menu contenant une Page d'accueil et 3 pages. En ajoutant niveaux, pages et Séparateurs à l'aide des commandes appropriées, ces éléments sont insérés dans le dossier Menu du Plan qui prend forme au fur et à mesure.

Si, à travers les sections de l'étape 4 - Paramètres avancés, le site est complété par l'introduction du Moteur de Recherche interne (voir, Modifier le modèle), d'une Page d'accueil, d'un Blog, d'une Zone Réservée (il suffit qu'une seule page ait été définie comme Page protégée) ou d'un Panier e-commerce, le programme ajoute à la structure du Plan le dossier Pages spéciales avec les éléments correspondants: Recherche, Page d'accueil, Blog, Page de connexion et Panier virtuel e-commerce.

En plus d'afficher la structure arborescente du Plan, certaines informations supplémentaires sont décrites pour les Pages insérées comme le Titre complet et la Description de page. Naturellement, afin que ces informations soient affichées, il est nécessaire qu'elles soient définies précédemment dans la fenêtre Propriétés de page.
Cliquez pour etendre/reduire Référence: les commandes de la Barre d'Outils

Immédiatement au-dessus de la représentation schématique du Plan, vous disposez d'une Barre d'Outils avec les commandes suivantes:

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Elles permettent respectivement de couper, copier et coller les pages sélectionnées à l'intérieur du même Projet ou dans différents Projets. Ces commandes sont aussi disponibles dans le menu Popup rappelé à l'aide d'un clic droit de la souris en pointant le Plan.

Etendre - Réduire

Étend ou réduit le Niveau sélectionné de manière à afficher ou ne pas afficher les Pages qu'il contient.

Page invisible dans le menu

Si vous sélectionnez cette option, la Page ou le Niveau sélectionné n'est pas affiché dans le Menu de Navigation. Lorsqu'un Niveau est invisible, toutes les Pages qu'il contient deviennent automatiquement invisibles. Les Pages invisibles sur le Menu peuvent être utilisées comme pages d'approfondissement et être rappelées par des liens internes. Il est nécessaire de créer au moins un lien vers les pages invisibles, autrement elles ne sont pas visibles par les Utilisateurs.

Page protégée

Permet d'ouvrir la fenêtre Page protégée permettant de définir une Page comme Protégée en cochant simplement l'option Définir cette page comme page protégée. Après cela, vous devez indiquer quels Groupes et/ou Utilisateurs peuvent accéder à cette Page Protégée, en cliquant dans la liste proposée. Activer un Groupe ou activer tous les Utilisateurs appartenant à un Groupe, ce n'est pas la même chose: dans le premier cas seulement, si de nouveaux Utilisateurs sont ajoutés au Groupe par la suite, ils pourront automatiquement accéder à la page protégée.

Cliquez pour etendre/reduire

Pour créer de nouveaux Groupes/Utilisateurs, il suffit d'accéder à la fenêtre Gestion de l'accès de l'étape 4 - Paramètres avancés.

§La Page d'accueil peut aussi disparaître du Menu: il est conseillé d'utiliser cette possibilité seulement si vous avez l'intention de mettre un lien vers cette page à d'autres endroits du Site, par exemple dans l'en-tête du Modèle.

§Si vous voulez créer votre propre Menu de navigation, vous pouvez rendre invisibles toutes les Pages e les Niveaux du Plan: dans ce cas, au lieu de sélectionnes une Page à la fois, il est suffisant sélectionner directement le répertoire Menu et cliquer sur le bouton Page invisible dans le menu.

Cliquez pour etendre/reduire Référence: les commandes pour définir le Plan

Voici les commandes permettant de définir le Plan du Site:

§Nouveau niveau [CTRL+L]: permet d'insérer un nouveau Niveau de menu. Il n'y a pas de limite au nombre de Niveaux et sous-niveaux pouvant être insérés.

§Nouvelle page [CTRL+P]: permet de créer une nouvelle Page qui sera automatiquement placée au Niveau sélectionné.

§Séparateur: permet d'insérer un Séparateur pour organiser visuellement les éléments du menu. Le séparateur peut être un espace ou un titre ; il est particulièrement utile pour créer des menus sur plusieurs colonnes (voir, Style de menu déroulant | Éléments de menu a l'étape 4 - Paramètres avancés).

§Supprimer [CANC]: permet de supprimer la Page, le Niveau ou le Séparateur sélectionné.

§Renommer [F2]: permet de modifier le nom de la Page d'Accueil, de la Page, du Niveau ou du Séparateur sélectionné. Il est conseillé de bien choisir les noms des Pages, des Niveaux et des Séparateurs puisqu'ils seront repris dans le Menu de navigation, comme titres des Pages et noms des fichiers HTML associés aux Pages, à moins qu'il ne soit spécifié différemment dans la fenêtre Propriétés de page.

§En haut [CTRL+U] / En bas [CTRL+D]: permettent de modifier l'ordre des Pages, des Niveaux et Séparateurs, en déplacent l'objet sélectionné respectivement en haut ou en bas.

Pour modifier l'ordre des Niveaux, des Pages et Séparateurs, vous pouvez agir directement sur le Plan: sélectionnez l'élément, faites-le glisser et relâchez-le à l'endroit voulu (Drag&Drop). Vous pouvez sélectionner plusieurs Niveaux, Pages et/ou Séparateurs à l'aide des touches CTRL et SHIFT.

§Propriétés: à travers la fenêtre rappelée, définissez les propriétés de la Page (fenêtre Propriétés de page) ou du Niveau (fenêtre Propriétés du niveau) sélectionné.

Bonnes pratiques:

-

Comment créer et travailler sur le Plan du Site


Fenêtre Propriétés du niveau

Étape 2 - Création du plan > Création du plan >

Fenêtre Propriétés du niveau

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtre Propriétés du niveau, rappelée en sélectionnant un Niveau dans le Plan et en cliquant sur le bouton Propriétés, présente quelques options pour définir le comportement du Niveau dans la Menu de navigation.

Dans WebSite X5 les Niveaux, différemment des Pages, n'ont pas des contenus propres à eux même: ce sont de simples catégories, utiles pour organiser les Pages et, donc, pour structurer le Menu de navigation en une arborescence simple à parcourir pour ceux qui naviguent dans le Site.

Cliquez pour etendre/reduire Référence: les Propriétés des Niveaux

§Masquer le menu déroulant pour ce niveau: si vous sélectionnez cette option, le menu Popup relatif à l'élément du Niveau n'apparaît pas au passage de la souris.

§Lien à exécuter en cliquant sur l'objet : permet de définir un lien direct vers l'élément du Niveau à l'aide de la fenêtre Lien.

Il peut être utile de choisir de "Ne pas afficher le menu Popup pour un Niveau" en sélectionnant l'option "Lien à exécuter en cliquant sur l'objet", par exemple, pour insérer un lien à un Site externe directement comme élément du menu, ou pour remplacer un sous-menu contenant un nombre élevé d'éléments par l'ouverture d'une Page créée spécialement pour accorder l'accès aux différentes sections internes.

§Icône de l'élément de menu : permet de sélectionner une image (fichier .JPG, .GIF, .PNG) qui sera affichée sur le Menu de navigation, à côté de l'élément relatif au niveau.


Fenêtre Propriétés de page

Étape 2 - Création du plan > Création du plan >

Fenêtre Propriétés de page

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtre Propriétés de page, rappelée en sélectionnant une Page dans le Plan et cliquant sur le bouton Propriétés, présente de nombreuses options à travers lesquelles il est possible de définir une série de propriétés nécessaires pour l'optimisation, pour la personnalisation graphique et pour ajouter d'éventuelles parties de code.

Les options disponibles sont organisées en 3 sections: Général, Graphiques et Avancées.

Cliquez pour etendre/reduire Référence: les options de la Section Général

Les options de la section Général de la fenêtre Propriétés de page permettent de définir une série de paramètres nécessaires pour optimiser correctement la Page:

§Titre complet: permet de définir un titre différent à la Page de celui du Plan du site.
Le nom que vous donnez à la Page lors de la construction du Plan est repris comme élément dans le Menu de navigation; l'éventuel Titre complet indiqué est en revanche affiché comme Titre effectif de la Page.
Pour la Page d'Accueil, le titre n'est pas affiché à l'intérieur de la Page mais vous pouvez indiquer le Titre complet: le titre indiqué est toujours utilisé dans le menu, tandis que le titre ou le Titre complet (si indiqué) est utilisé pour composer le Méta tag <title> dans le code HTML de la Page.

§Description de page: permet d'insérer une description spécifique pour la Page. La description doit être courte et précise: elle est insérée comme valeur du Méta tag <description> dans le code HTML de la Page et est utilisée par les Moteurs de Recherche pour l'indexation.

§Mots-clé pour la recherche: permet d'insérer une série de mots-clé spécifiques pour la Page (séparés par une virgule). Les mots-clé sont insérés comme valeur du Méta Tag <keywords> dans le code HTML de la Page et sont utilisés par les Moteurs de Recherche pour l'indexation.

§Nom du fichier créé: permet de définir le nom du fichier HTML correspondant à la Page.
À moins qu'il ne soit spécifié différemment, comme nom du fichier HTML le programme prend automatiquement le nom donné à la Page lors de la construction du Plan. Donnez des noms brefs et significatifs aux fichiers pour obtenir des adresses simples et faciles à mémoriser, cela sera également positif pour l'indexation effectuée par les Moteurs de Recherche. Cette option n'est pas disponible pour la Page d'Accueil.
Cliquez pour etendre/reduire Référence: les options de la Section Graphiques

Les options de la section Graphiques de la fenêtre Propriétés de page permettent d'agir sur certains aspects graphiques importants de la Page sur laquelle vous êtes en train de travailler:

En premier lieu, il est possible faire en sorte que la Page ait un arrière-plan différent des autres Pages du Site, défini dans le Modèle choisi (voir, Sélection du modèle). Nous rappelons que l'arrière-plan de la Page est la zone externe à la Page qui est affichée quand la fenêtre du navigateur est ouverte avec une taille dépassant la résolution du site.

Les options pour définir l'Arrière-plan du Site Web seulement pour cette Page sont:

§Couleur d'arrière-plan: spécifie la couleur à utiliser comme remplissage d'arrière-plan.

§Fichier image: sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan.

§Disposition: permet d'indiquer si l'image insérée comme arrière-plan doit être répétée ou non. L'image peut être répétée horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. En plus, il est possible de faire en sorte que l'image soit adaptée, autrement redimensionnée de façon à couvrir tout l'arrière-plan..

§Alignement: permet de choisir l'alignement de l'image insérée comme arrière-plan de la Page.

§Image d'arrière-plan fixe: si vous sélectionnez cette option, l'image insérée comme arrière-plan de la page reste fixe même quand vous faites défiler le contenu de la page à l'aide de la barre de défilement.

L'arrière-plan du Contenu de la Page sélectionnée peut-être aussi défini différemment des autres Pages du Site, défini dans le Modèle choisi (voir, Sélection du modèle). Dans ce cas il faut utiliser les options, identiques à celles vues, présentes dans l'élément Contenu de la Page pour cette Page uniquement.

Enfin, il est encore possible de définir quelques Options générales:

§Icône de l'élément de menu: permet de sélectionner une image (fichier .JPG, .GIF, .PNG) qui sera affichée sur le Menu de navigation, à côté de l'élément relatif à la Page.

§Créer la Page sans le modèle: fait en sorte que le Modèle de style choisi ou créé comme Modèle Personnalisé ne soit pas appliqué à la Page (voir, Sélection du modèle). Si vous sélectionnez cette option, la Page est créée en maintenant seulement son contenu sans y appliquer ni le Modèle de style ni le menu de navigation.

§Largeur de page: disponible seulement si vous avez sélectionné l'option Créer la Page sans le modèle, elle permet d'indiquer la valeur en pixels de la largeur de la page.
Cliquez pour etendre/reduire Référence: les options de la Section Avancées

À travers les options de cette fenêtre vous pouvez agir manuellement sur le code HTML généré pour la Page sur laquelle vous travaillez.

§Extension du fichier créé: permet de définir l'extension avec laquelle sera enregistré le fichier relatif à la Page. Le programme propose par défaut l'extension .HTML, mais vous pouvez aussi choisir entre .PHP, .ASP, .CFM et .JSP. Vous pouvez aussi enregistrer, avec une extension différente, le fichier index.html relatif à la Page d'accueil. Pour les pages protégées seulement (voir la commande [image] Page protégée dans la barre d'outils du Plan) vous ne pouvez pas modifier le format du fichier créé qui reste obligatoirement .PHP.

§Code personnalisé: définit la position dans le code HTML de la Page où il faut insérer le code personnalisé: Avant la balise <HTML>, Avant la balise </HEAD>, Propriétés de la balise BODY (ex. Style, onload, etc.) (à savoir à l'intérieur de l'instruction <BODY>, par exemple: <BODY onload="alert(('Bonjour le monde!') " >), Avant la balise </BODY>, Après la balise </BODY>. La position étant sélectionnée, vous disposez d'un champ où vous devez saisir ou coller la portion de code à insérer à l'intérieur du code HTML de la Page créée automatiquement par le Programme.

L'option Code personnalisé à insérer est utile quand, par exemple, vous voulez relier des feuilles de styles (CSS) particulières, ou vous devez lancer des événements sur l'onload de la Page. Notamment, pour le bon fonctionnement de certains JavaScript, qui peuvent être insérés à travers l'Objet HTML et Widgets, il faut entrer des lignes de code spécifiques dans la section <HEAD> et dans la section <BODY> du fichier HTML de la Page.

Infine, nella sezione Paramètres Plan du site sono raggruppate alcune opzioni utili per lavorare sulla SiteMap del Sito:

§Ajouter cette page au plan du site: cette option, activée par défaut, fait en sorte que la page soit comprise dans le Plan du Site.

§Priorité des contenus: permet d'affecter des points à la Page, pour indiquer son importance par rapport aux autres Pages du Site. Ce paramètre est indiqué dans le Plan du Site créé.

§Fréquence de mise à jour : permet de définir avec quelle fréquence la page est mise à jour. Ce paramètre est indiqué dans le Plan du Site créé

Remarques sur la compatibilité avec les versions précédentes:

À la différence des versions précédentes, dans la version 10 actuelle il est possible d'appeler la fenêtre Propriétés de page aussi pour les Pages Spéciales qui apparaissent automatiquement dans le Plan du Site en conséquence à l'insertion du Moteur de recherche interne (voir, Modifier le modèle), d'une Page d'accueil, d'un Blog, d'une Zone Réservée ou d'un Panier e-commerce.

Approfondissements:

-

Le navigateur Web et le navigateur de WebSite X5


Création de la page

Étape 3 - Création de la page >

Création de la page

 Return to chapter overview
Montrer/Cacher le texte caché

Après avoir articulé le Plan du projet, vous pouvez commencer la création de chaque page insérée dans le site. La fenêtre Création de la page permet de définir la structure de mise en page et d'entrer les contenus.

Le chemin et le titre de la page sur laquelle vous êtes en train de travailler sont indiqués comme Page courante.

Cliquez pour etendre/reduire Référence: la grille de mise en page

Pour rendre plus intuitive la mise en page des contenus, WebSite X5 propose une grille qui est composée, par défaut, de 2 lignes et 2 colonnes: il suffit de faire glisser les objets à l'intérieur des cellules de cette grille (un objet par cellule), pour composer la page.

Bien évidemment, vous pouvez ajouter des lignes et des colonnes pour disposer d'un plus grand nombre de cellules et aussi définir manuellement la largeur de chaque colonne. Grâce à ces possibilités de dessin de la grille et au fait de pouvoir placer un objet dans plusieurs cellules adjacentes, vous pouvez obtenir des mises en page très raffinées.

Une précision importante: l'utilisation de la grille sert seulement à simplifier et guider la mise en page des contenus. Exception faite pour quelques cas particuliers spécifiques, représentés par des combinaisons de mise en page très complexes, la grille de mise en page n'est pas "traduite" par un tableau de code HTML des pages. Dans tous les cas, la grille de mise en page ne sera jamais visible pendant la navigation avec le navigateur.

Comme dit précédemment, chaque cellule de la grille peut contenir un seul objet mais chaque objet peut être placé sur plusieurs cellules adjacentes horizontalement ou verticalement, de façon à occuper un plus grand espace sur la page.

L'aspect des cellules de la grille de mise en page change selon les différents états de la cellule:

§si elle contient un objet qui n'a pas encore été construit, elle montre l'icône correspondant au type d'objet sur un arrière-plan composé de lignes obliques grises;

§si elle contient un objet qui a déjà été construit, elle montre l'icône correspondant au type d'objet sur un arrière-plan bleu ciel uniforme;

§si elle contient l'objet sélectionné, elle montre l'encadrement et les poignées de sélection.

Cliquez pour etendre/reduire Référence: les commandes de la Barre d'Outils

Juste au dessus de la Grille de mise en page on peut trouver une Barre d'Outils qui met à disposition les commandes suivantes:

Contenu objet

Ouvre la fenêtre qui permet de procéder à la création de l'objet sélectionné dans la Grille de mise en page. La fenêtre rappelée varie selon le type d'objet (texte, image, etc.).

Style de cellule

Permet de rappeler la fenêtre Style de cellule pour définir l'aspect graphique de la cellule courante dans la Grille de mise en page.

Assigner une Ancre à un objet

Crée une Ancre et l'associe à l'Objet sélectionné dans la Grille de mise en page. Si vous cliquez sur la flèche à côté du bouton, il est possible d'afficher un menu avec les commandes suivantes:Insérez Ancre..., Modifier... et Supprimer.

Ajouter une ligne /Ajouter une colonne

Permet, respectivement, d'ajouter une ligne ou une nouvelle colonne dans le Grille de mise en page. Si vous cliquez sur la flèche à côté des boutons, il est possible choisir si la ligne/colonne doit etre ajoutée avant ou après la cellule sélectionnée. Vos grilles peuvent avoir au maximum 64 lignes et 12 colonnes.

Supprimer une ligne / Supprimer une colonne

Permet, respectivement, de supprimer la ligne ou la colonne sélectionnée de la Grille de mise en page. Au minimum la Grille de mise en page est composée d'une seule cellule (1 ligne x 1 colonne).

L'Ancre est une référence qui permet d'identifier la position d'un Objet dans la Page: elle utilisée pour définir des liens direct à l'Objet même.

Remarques sur la compatibilité avec les versions précédentes:

Dans les versions précédentes, les options relatives aux Marges de la Cellule et à l'alignement du contenu de la Cellule étaient disponibles à travers des menus rappelés par les boutons [image] et [image] présents dans la Barre d'Outils disponible au-dessus de la Grille de mise en page. Dans la version 10, ces boutons ont été supprimés et les options ont été incluses dans la fenêtre Style de cellule| Style.
Cliquez pour etendre/reduire Référence: la liste des Objets disponibles

À côté de la Grille de mise en page, vous trouverez la liste des Objets disponibles. Pour insérer un objet dans une page, il suffit de sélectionner l'icône relative dans la liste des objets disponibles, puis de la glisser-relâcher dans la grille de mise en page, au niveau de la cellule voulue.

Les Objets disponibles sont:

Objet Texte | Objet Image | Objet Tableau | Objet de la galerie
Objet Vidéo/Son | Objet Formulaire d'envoi d'email | Objet Réseau Social | Objet Livre d'or
Objet Carte | Objet Animation Flash | Objet Liste des produits | Objet HTML et Widgets

Une fois l'Objet inséré dans la Grille de mise en page, il suffit de le sélectionner et de cliquer sur le bouton [image] (ou cliquez deux fois) pour auvrir la fenêtre de création.

Remarques sur la compatibilité avec les versions précédentes:

Objets disponibles - L'Objet Livre d'or, l'Objet Réseau Social et l'Objet Carte n'ont été introduits que dans la version 10 actuelle de WebSite X5: dans la version précédente 9 ils étaient disponibles comme des Widgets de l'Objet HTML et Widgets.

Bonnes pratiques:

-

Comment définir une Page à travers la Grille de mise en page


Objet Texte

Étape 3 - Création de la page >

Objet Texte

 Return to chapter overview
Montrer/Cacher le texte caché

En plus des images, des vidéos et des animations pouvant être utilisées, les contenus principaux d'un site sont véhiculés, dans la plupart des cas, à travers les textes.

Écrire pour le réseau ce n'est pas comme écrire en pensant à l'impression: chaque moyen a ses particularités et Internet se distingue principalement pour son support (le moniteur d'un ordinateur ou l'écran d'un dispositif mobile), son mode de lecture (ressemblant davantage à une lecture rapide qu'à une lecture séquentielle) et la disponibilité d'un nombre relativement illimité de possibilités (si l'on considère le nombre de sites qui s'occupent d'un même sujet).

Pour capturer l'attention d'un lecteur, le pousser à lire et, dans la meilleure des hypothèses, le persuader de la qualité de ce que nous lui proposons, les contenus textuels doivent se conformer à la publication sur le réseau: ils doivent tout d'abord présenter des contenus d'intérêts d'une manière succincte, mais pas cryptique, et efficace. Il convient de diviser le discours en périodes brèves, il sera ainsi plus simple à comprendre et visuellement moins compact et lourd. Enfin, pour améliorer la lisibilité des textes, il est important de soigner la typographie, à savoir l'agencement des caractères (titres, mises en évidence, corps principal, légendes et autre).

Il est très important de réfléchir sur ces aspects et de soigner la rédaction des textes pour créer un site web qui recevra un jugement positif de la part des visiteurs. Un contenu peu intéressant, exprimé d'une manière approximative avec des phrases pleines de fautes de grammaire ou d'orthographe, entraînerait l'idée d'un site négligé ne méritant pas une seconde visite.

Ces brèves mais justes considérations sur le thème du Web Writing étant faites, WebSite X5 permet de composer les textes nécessaires à travers un éditeur interne et de les formater. Bien évidemment, vous pouvez reprendre des textes créés avec d'autres programmes et les insérer au moyen d'un simple Copier-Coller.

Cliquez pour etendre/reduire Référence: les commandes de l'Éditeur de Texte

Dans la Barre d'Outils de l'Éditeur de Texte vous disposez des commandes suivantes:

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Permettent, respectivement, de couper, copier et coller le texte sélectionné. Dans ce cas, avant de coller le texte, le programme lui enlève toutes les options de mise en forme éventuellement associées à l'origine et lui attribue celles définies dans l'éditeur.

Coller spécial

Permet de coller le texte précédemment coupé ou copié à l'aide des commandes Couper ou Copier. Le texte collé garde toutes les informations d'origine.

Grâce aux commandes Couper, Copier ou Coller vous pouvez reprendre des textes créés précédemment, même avec des éditeurs différents.

Annuler [CTRL+Z] - Restaurer [ALT+MAJUSC+BACKSPACE]

Annulent et restaurent la dernière opération exécutée/annulée.

Insérer lien [CTRL+L]

Permet de définir un lien hypertextuel sur le (ou les) mot(s) sélectionné(s). Vous pouvez définir les configurations du lien dans la fenêtre Lien.

Insérer image

Permet d'insérer une image (au format .JPG, .GIF, .PNG, .BMP) à l'intérieur du texte. Les images insérées dans l'objet Texte sont automatiquement redimensionnées si leur taille dépasse celle de la cellule de la Grille de mise en page. Par ailleurs, vous pouvez redimensionner librement les images insérées à l'aide des poignets de sélection: pour les mises en page particulières, il est toutefois conseillé d'utiliser l'Objet Image.

Activer code HTML

Permet de saisir directement le code HTML à l'intérieur de la page de texte. Pratiquement, en mode HTML, les caractères < et > ne sont pas interprétés comme "inférieur" et "supérieur", ce qu'ils contiennent correspond à un tag HTML.

Paramètres de RollOver

Permet de définir le RollOver sur le texte: ainsi le texte n'est plus statique mais il défile. Pour définir les options du RollOver, appelez la fenêtre RollOver.

Adapter à la largeur de la cellule

Permet de simuler dans l'éditeur l'aspect que prendra le texte en fonction de la taille de la cellule de la Grille de mise en page qui l'accueillera.

Arrière-plan clair/foncé

Permet de définir une couleur claire ou foncée pour l'arrière-plan de la fenêtre de l'éditeur de texte: il est ainsi plus simple, par exemple, de composer les textes qui, pour avoir un bon contraste par rapport à l'arrière-plan prévu par le modèle graphique appliqué, doivent être blancs.

Choix des polices - Taille de police

Permettent, respectivement, de choisir le type de police (font) à utiliser et de définir la taille.

La liste déroulante propose toutes les polices présentes sur l'ordinateur. Si la police utilisée n'est pas installée sur l'ordinateur de l'utilisateur qui navigue sur votre site, elle sera automatiquement remplacée par une police semblable.

Gras [CTRL+B] - Italique [CTRL+I] - Souligné [CTRL+U]

Permettent, respectivement, de mettre le texte sélectionné en gras, italique ou souligné.

Couleur du texte - Couleur d'arrière-plan du texte

Permettent de définir la couleur à appliquer au texte sélectionné ou à l'arrière-plan du texte sélectionné.

Liste à puces

Permet de créer une liste à puces.

Mettre en retrait / Annuler le retrait

Permettent, respectivement, d'augmenter et réduire le retrait du paragraphe sélectionné.

Alignement à gauche - Alignement au centre - Alignement à droite - Alignement justifié

Permettent, respectivement, d'aligner à gauche, au centre, à droite ou de justifier le texte sélectionné.

Disposer le texte à droite - Disposition normale - Disposer le texte à gauche

Activés quand vous sélectionnez une image insérée dans le texte, ils permettent de faire défiler le texte le long du côté droit de l'image, d'insérer l'image dans le flux du texte comme un mot quelconque ou de faire défiler le texte le long du côté gauche de l'image.

Si vous cliquez sur le bouton droit de la souris, vous affichez un menu contextuel qui propose de nouveau les commandes suivantes: Annuler, Couper, Copier, Coller, Coller spécial et Sélectionner tout.


Fenêtre RollOver

Étape 3 - Création de la page > Objet Texte >

Fenêtre RollOver

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre, appelée à l'aide du bouton [image] de l'éditeur de l'Objet Texte ou de l'Objet Tableau, permet de définir les paramètres du RollOver des textes.

Cliquez pour etendre/reduire Référence: les paramètres du RollOver

Tout d'abord, vous devez activer l'effet en sélectionnant l'option Activer RollOver.

L'effet étant activé, vous pouvez définir son aspect à l'aide des options du cadre Modalité:

§Mouvement: permet de définir comment le texte défilera. Vous pouvez choisir parmi les options suivantes:

Aucun - Afficher la barre de défilement: le texte ne défile pas mais, comme vous fixez la hauteur de la cellule (voir l'option Hauteur), si celle-ci ne suffit pas pour afficher tout le texte, une barre de défilement sera automatiquement insérée.

Défilement unique: le texte défile dans le sens indiqué et il s'arrête à la fin.

Défilement continu: le texte défile dans le sens indiqué et, à la fin, il repart du début sans s'arrêter.

Défilement alterné: le texte défile dans le sens indiqué et, à la fin, il recommence dans le sens opposé.

Défilement par sections: le texte est virtuellement décomposé en sections, à savoir en blocs de hauteur égale à celle définie avec l'option Hauteur. Le défilement du texte entraîne l'affichage de la première section, suivi d'une pause avant d'afficher la deuxième section. Il continue ainsi en repartant du début après avoir affiché la dernière section. Pour que l'effet ait un rendement optimal, le texte doit être écrit et formaté de sorte à pouvoir le partager en sections en définissant la Hauteur appropriée.

§Sens: permet de définir la direction de défilement du texte. Le défilement peut avoir lieu vers le Haut, le Bas, la Gauche ou la Droite.

Par ailleurs, dans le cadre Options vous disposez des éléments suivants:

§Effet: permet de choisir entre les effets Linéaire, Alterné et Swing pour tous les types de mouvement, sauf pour le Défilement continu.

§Hauteur: permet de définir la valeur pour la hauteur de la cellule contenant le texte.

§Durée (sec.): permet de définir pendant combien de secondes doit durer l'effet. Si vous avez activé le Défilement unique, le Défilement continu ou le Défilement alterné, la durée définit l'intervalle de temps où se développe le mouvement, avant de repartir. En revanche, si vous avez activé le Défilement par sections, la durée définit le temps d'affichage d'une section, avant de passer à la section suivante.

§Arrêter le mouvement au survol de la souris: permet de faire en sorte que le défilement s'arrête lors du passage de la souris.

L'option Hauteur n'est disponible que si le RollOver défini est vertical (direction: vers le haut ou le bas). En revanche, si le RollOver défini est horizontal (direction: vers la gauche ou la droite), l'effet est meilleur si l'objet texte occupe une ligne entière de la Grille de mise en page.


Objet Image

Étape 3 - Création de la page >

Objet Image

 Return to chapter overview
Montrer/Cacher le texte caché

Les images sont l'un des éléments les plus utilisés lors de la création d'une page Web. Entre autres, elles permettent d'illustrer une idée, de montrer un produit, de véhiculer un message ou d'embellir simplement. De toute façon, les images sont importantes car elles concourent à définir l'aspect d'ensemble du site et faire en sorte qu'il soit beau, soigné et professionnel.

WebSite X5 permet de définir tous les principaux formats graphiques et met à disposition un Editeur d'image fonctionnel pour mener à bien toutes les opérations de retouche photo les plus courantes: coupe, rotation, correction, ajout de masques, filtres et cadres. Par ailleurs, il permet de travailler sur les images pour obtenir des visions panoramiques spectaculaires et des zooms.

Il faut souligner que WebSite X5 affronte aussi le problème de la copie non autorisée des images prises sur Internet en proposant un système de protection qui empêche de remonter au fichier d'origine et peut prévoir l'application d'un filigrane et l'indication du copyright.

Les commandes nécessaires pour procéder à la création d'un Objet Image sont organisées dans les sections suivantes: Général, Affichage et Plan du site.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

À travers les commandes de cette section vous procédez à l'importation des fichiers graphiques et à la manipulation des Images.

WebSite X5 permet de définir tous les formats graphiques les plus courants (.JPG,.GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF) en sélectionnant simplement la ressource à utiliser parmi celles présentes sur l'ordinateur ou directement en ligne sur Internet.

L'aperçu de l'image importée est affiché dans le cadre Aperçu. Si vous cliquez sur le bouton Modifier... présent sous l'aperçu, vous pouvez rappeler l'Editeur d'image interne pour modifier l'image importée.

Pour l'image insérée, vous pouvez définir une série de Propriétés:

§Titre: c'est le titre de l'image; dans le code HTML des pages, le texte introduit sera affecté à l'attribut title du tag <img>.

§Texte alternatif: c'est le texte qui est présenté à la place de l'image quand celle-ci ne peut pas être affichée. Dans le code HTML des pages, le texte introduit sera affecté à l'attribut alt du tag <img>.

Le Titre et le Texte alternatif sont deux paramètres qu'il faut évaluer et composer avec attention car ils sont importants pour l'accessibilité et l'optimisation des sites Web.

§Lien: permet de définir un lien sur l'image. Si vous cliquez sur le bouton [image] , vous ouvrez la fenêtre Lien permettant de choisir le type d'action et les options relatives.
Cliquez pour etendre/reduire Référence: les commandes de la Section Affichage

À travers les commandes de cette section vous définissez comment l'Image importée doit être affichée: WebSite X5, en effet, permet d'obtenir aussi des Images panoramiques et/ou avec des effets zoom et déplacement.

Les Mode d'affichage disponibles sont:

Redimensionnement automatique de l'image: activée par défaut, cette option redimensionne automatiquement l'image pour l'adapter aux dimensions de la cellule Grille de Mise en page qui la contient.

Agrandir et déplacer manuellement l'image: si vous sélectionnez cette option, vous pouvez agrandir l'image à l'aide d'un clic jusqu'à atteindre les dimensions prévues par le zoom défini. L'image étant agrandie, vous pouvez la déplacer pour mettre en premier plan le détail voulu. Dans ce cas, le déplacement doit être effectué manuellement, en cliquant sur l'image et en la faisant glisser jusqu'à la position voulue.

Pour obtenir cet effet, les dimensions de l'image sont d'abord réduites à celles de la cellule de la Grille de Mise en page puis recalculées en fonction du facteur défini pour le Zoom initial (si vous choisissez comme Modalités de déplacement le Déplacement libre) ou en fonction de la 'Hauteur établie (si vous choisissez l'option Photo panoramique horizontale ou Photo panoramique verticale comme Modalités de déplacement). Ainsi l'image sera plus grande que la zone d'affichage et vous pourrez vous déplacer à l'intérieur de celle-ci.

Agrandir et déplacer automatiquement l'image: semblable à l'option précédente, toutefois le déplacement se produit en approchant simplement la souris des bordures de l'image.

Après avoir sélectionné comme Mode d'affichage le Redimensionnement automatique de l'image, vous pouvez agir sur les Paramètres suivants:

§Qualité: permet d'indiquer le niveau de qualité à maintenir pour enregistrer l'image en .JPG. Toutes les images importées sont automatiquement converties au format .JPG ou, si vous avez défini la transparence, au format .PNG. Pour l'enregistrement en .JPG, plus le taux de compression est élevé, plus la qualité sera basse.

Il est conseillé d'insérer les fichiers graphiques au format .GIF ou .JPG. Toutes les images insérées, dans un format différent de .JPG, .GIF et .PNG, sont automatiquement converties au format JPG, selon le niveau de compression indiqué. La conversion au format .JPG ou, pour les images pour lesquelles vous avez défini la transparence, au format .PNG est effectuée même si l'image a une taille supérieure à celle de la cellule de la Grille de Mise en page qui la contient et si vous la modifiez au moyen de l'Editeur d'image.

Dans tous les autres cas, l'image est copiée telle quelle. Cela est nécessaire pour maintenir l'effet de transparence appliqué aux images .GIF.

§Méthode de réduction: permet de choisir la méthode à appliquer pour diminuer la taille (largeur et hauteur) des images. Vous pouvez choisir entre:

-Bilinear (plus rapide): c'est la méthode de réduction plus rapide mais qui permet de garder une qualité d'image inférieure par rapport aux autres méthodes.

-Decimate (moyen): c'est la méthode de réduction qui permet d'obtenir les performances, en terme de vitesse et qualité, intermédiaire au autres méthodes.

-Bicubic (plus lent, plus précis): c'est la méthode de réduction la plus lente mais elle est capable assurer une haute qualité d'image.

En sélectionnant comme Mode d'affichage Agrandir et déplacer manuellement l'image ou Agrandir et déplacer automatiquement l'image, vous pouvez agir sur les Paramètres suivants:

§Modalités de déplacement: permet d'indiquer dans quelle direction l'image peut être déplacée manuellement ou automatiquement. Les options disponibles sont:

-Déplacement libre: L'image peut être glissée aussi bien dans le sens horizontal que vertical. Dans ce cas, vous devez spécifier la valeur de Zoom max.: par exemple, un facteur d'agrandissement défini à 200% double les dimensions d'origine de l'image..

Image insérée | Image avec l'effet

-Photo panoramique horizontale: L'image peut être glissée seulement dans le sens horizontal. Pour bien exploiter cet effet, la base de l'image doit être beaucoup plus grande que sa hauteur. Dans ce cas, vous devez spécifier la valeur en pixels de la hauteur de l'image dans le champ Hauteur approprié.

Image insérée | Image avec l'effet

-Photo panoramique verticale: l'image peut être glissée seulement dans le sens vertical. À présent, vous devez utiliser des images ayant une hauteur beaucoup plus grande que la base et définir dans le champ Hauteur la valeur en pixels que vous voulez maintenir pour la cellule de la Grille de mise en page.

Image insérée | Image avec l'effet

§Zoom max.: disponible seulement pour le mode Déplacement libre, elle permet de définir le facteur d'agrandissement à appliquer à l'image pour qu'elle soit plus grande que la zone d'affichage. En effet, si l'image n'était pas agrandie, vous ne pourriez pas la faire glisser.

§Hauteur: disponible seulement pour le mode de déplacement Photo panoramique horizontale et Photo panoramique verticale, elle permet de définir, dans le premier cas, la valeur en pixels de la hauteur de l'image, ou, dans le second cas, la hauteur de la cellule de la Grille de mise en page où l'image est affichée.

§Agrandir l'image: activée par défaut, cette option permet d'agrandir et rétrécir l'image par la molette de la souris. Quand vous ouvrez la page, l'image apparaît dans sa taille d'origine et l'icône située au bas à droite indique la possibilité de faire le zoom. Quand vous cliquez sur l'image, elle s'agrandit en fonction du facteur de Zoom max. défini.

§Afficher la barre de zoom: disponible seulement si l'option Agrandir l'image est activée, elle permet d'afficher une barre pour régler et définir le zoom.

§Afficher le navigateur: si vous sélectionnez cette option, l'utilisateur pourra appeler le navigateur. Le navigateur est une petite fenêtre positionnée sur l'image contenant une miniature de l'image. La fonction du navigateur est de montrer dans un petit cadre, la partie de l'image qui est actuellement affichée: ce cadre peut être glissé dans le navigateur ce qui correspond à déplacer manuellement l'image. En déplacent la souris en dehors de la fenêtre Image, le navigateur disparaît avec un effet de mouvement en sortie vers le haut.

§Activer le mouvement continu automatique: fait en sorte que l'image continue à se déplacer automatiquement pendant qu'elle est affichée. Cela est utile pour faire comprendre à l'utilisateur qu'il peut agrandir l'image. L'utilisateur peut prendre le contrôle du mouvement en approchant simplement la souris des bordures de l'image, et il peut faire le zoom à travers la Barre du Zoom, si disponible, ou avec la molette de la souris.

Si pour l'image avec laquelle on travaille le Redimensionnement automatique de l'image a été défini comme Mode d'affichage, il est possible de prévoir un Effets au survol de la souris:

§Effets au survol de la souris: définit le type d'effet qui doit être reproduit au passage de la souris sur l'image parmi ceux proposés.

§Paramètres: différents selon le type d'Effets au survol de la souris sélectionné, permettent de définir les paramètres qui définissent l'effet (par exemple, la couleur et l'épaisseur de la bordure pour l'effet "Bordure Colorée").

Enfin, il est possible utiliser les options de Protection pour permettre d'empêcher la copie non autorisée des images:

§Protéger l'image contre la copie: vous pouvez protéger l'image en empêchant qu'elle soit facilement copiée à l'aide de la commande Enregistrer image sous des menus Popup des différents Navigateurs.
Cliquez pour etendre/reduire Référence: les commandes de la Section Plan du site

À travers les commandes de cette section vous pouvez définir quelques informations supplémentaires sur l'image, utiles pour compléter le Plan du Site.

Sélectionnez tout d'abord l'option Ajouter l'image à la carte du site: ainsi le Plan du site qui est créé automatiquement par WebSite X5 (voir Créer automatiquement le SiteMap dans Paramètres généraux | Avancées) est complété par les informations relatives à l'image. À ce stade, vous devez définir les paramètres suivants:

§Titre: (paramètre optionnel) permet de donner un titre à l'image.

§Brève description: (paramètre optionnel) permet d'indiquer une description ou une légende pour l'image.

§Position géographique (par ex., adresse, ville, etc.): (paramètre optionnel) permet d'indiquer des informations, comme l'adresse, la ville ou le pays servant à localiser géographiquement l'image.

§Licence URL: (paramètre optionnel) permet d'indiquer l'URL du fichier contenant la licence d'emploi de l'image.

Dans le Plan du site, vous ne pouvez pas insérer des images sur lesquelles vous avez activé la protection (voir Protéger l'image contre la copie dans la section précedente Affichage).

Bonnes pratiques:

-

Comment créer et connecter le Plan du Site


Objet Tableau

Étape 3 - Création de la page >

Objet Tableau

 Return to chapter overview
Montrer/Cacher le texte caché

Les tableaux sont un très bon outil pour organiser et présenter des données.

Très souvent un tableau permet de résumer et présenter d'une manière efficace une quantité de données qui exigeraient sinon la rédaction d'un texte descriptif long et fastidieux. Par exemple, un tableau avec les tarifs d'un hôtel, rangés par type de chambre et période de l'année, est beaucoup plus facile à lire et interpréter qu'un texte contenant les mêmes informations.

Par ailleurs, les tableaux offrent un élément graphique qui rend la page plus agréable et brise la monotonie d'un texte long.

Bien évidemment, il est nécessaire que les tableaux soient bien structurés, ne soient pas trop complexes et aient un bel aspect.

WebSite X5 permet de créer des Tableaux à travers un Éditeur tout à fait semblable à celui proposé pour l'Objet Texte. Par défaut, l'Éditeur propose un tableau composé de deux lignes et trois colonnes, dimensionné de sorte à occuper complètement la largeur de la cellule de la Grille de Mise en page qui le contient. Bien évidemment, vous pouvez ajouter ou supprimer des lignes et des colonnes, définir les dimensions, unir et séparer les cellules pour créer des tableaux plus ou moins complexes.

Cliquez pour etendre/reduire Référence: les commandes de l'Éditeur Tableau

La Barre d'Outils de l'Éditeur dispose des commandes suivantes:

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Permettent, respectivement, de couper, copier et coller le texte sélectionné. Dans ce cas, avant de coller le texte, le programme lui enlève toutes les options de mise en forme éventuellement associées à l'origine et lui attribue celles définies dans l'éditeur.

Coller spécial

Permet de coller le texte précédemment coupé ou copié à l'aide des commandes Couper ou Copier. Le texte collé garde toutes les informations d'origine.

Annuler [CTRL+Z] - Restaurer [ALT+MAJUSC+BACKSPACE]

Annulent et restaurent la dernière opération exécutée/annulée.

Insérer lien [CTRL+L]

Permet de définir un lien hypertextuel sur le (ou les) mot(s) sélectionné(s). Vous pouvez définir les configurations du lien dans la fenêtre Lien.

Insérer image

Permet d'insérer une image (au format .JPG, .GIF, .PNG, .BMP) dans la cellule du tableau. Vous pouvez redimensionner librement les images insérées à l'aide des poignées de sélection.

Activer code HTML

Permet de saisir directement le code HTML à l'intérieur du tableau. Pratiquement, en mode HTML, les caractères < et > ne sont pas interprétés comme "inférieur" et "supérieur", ce qu'ils contiennent correspond à un tag HTML.

Paramètres de RollOver

Permet de définir le RollOver sur le texte: ainsi le texte n'est plus statique mais il défile. Pour définir les options du RollOver, appelez la fenêtre RollOver.

Arrière-plan clair/foncé

Permet de définir une couleur claire ou foncée pour l'arrière-plan de la fenêtre de l'éditeur de texte: il est ainsi plus simple, par exemple, de composer les textes qui, pour avoir un bon contraste par rapport à l'arrière-plan prévu par le modèle graphique appliqué, doivent être blancs.

Ajouter une ligne / Supprimer une ligne / Ajouter une colonne / Supprimer une colonne

Permettent, respectivement, d'ajouter une ligne ou une colonne après celle où se trouve le curseur ou de supprimer la ligne ou la colonne où se trouve le curseur.

Fusionner les cellules - Séparer les cellules

Permettent, respectivement, de fusionner plusieurs cellules adjacentes sélectionnées de façon à former une seule cellule, ou de séparer la cellule courante en deux cellules adjacentes horizontalement

Choix des polices - Taille de police

Permettent, respectivement, de choisir le type de police (font) à utiliser et de définir la taille.

La liste déroulante propose toutes les polices présentes sur l'ordinateur. Si la police utilisée n'est pas installée sur l'ordinateur de l'utilisateur qui navigue sur votre site, elle sera automatiquement remplacée par une police semblable.

Gras [CTRL+B] - Italique [CTRL+I] - Souligné [CTRL+U]

Permettent, respectivement, de mettre le texte sélectionné en gras, italique ou souligné.

Couleur du texte - Couleur d'arrière-plan de la cellule

Permettent de définir la couleur à appliquer au texte sélectionné ou à l'arrière-plan de la cellule du texte sélectionné.

Style de la bordure de la cellule

Permet de définir le style des bordures de la cellule courante. Vous pouvez définir la couleur et l'épaisseur des bordures qui délimitent les lignes et/ou les colonnes du tableau.

Liste à puces

Permet de créer une liste à puces.

Alignement à gauche - Alignement au centre - Alignement à droite - Alignement justifié

Permettent, respectivement, d'aligner à gauche, au centre, à droite ou de justifier le texte sélectionné.

Disposer le texte à droite - Disposition normale - Disposer le texte à gauche

Activés quand vous sélectionnez une image insérée dans une cellule contenant du texte, ils permettent de définir la disposition du texte en rapport à l'image, donc de faire défiler le texte le long du côté droit de l'image, d'insérer l'image dans le flux du texte comme un mot quelconque ou de faire défiler le texte le long du côté gauche de l'image.

Alignement en haut - Alignement au milieu - Alignement en bas

Permettent, respectivement, d'aligner verticalement en haut, au centre ou en bas le texte sélectionné.

Un clic droit de la souris rappelle un menu Popup proposant de nouveau les commandes Annuler, Couper, Copier, Coller, Coller spécial, Tout Sélectionner, mais aussi les commandes:

§Hauteur lignes

Permet de définir, dans la fenêtre appropriée, la valeur en pixels correspondante à la hauteur des lignes sélectionnées. Si vous définissez la valeur 0, les lignes prennent automatiquement la hauteur minimum nécessaire pour afficher le contenu inséré.

§Largeur colonnes
Permet de définir, dans la fenêtre appropriée, la valeur en pixels relative à la largeur des colonnes sélectionnées.

Vous pouvez aussi modifier la taille des lignes, des colonnes ou de chaque cellule en positionnant le curseur sur les bordures et en les faisant glisser jusqu'à la taille voulue en maintenant enfoncé le bouton gauche de la souris. Si vous sélectionnez une cellule et que vous déplacez la bordure gauche et/ou droite, vous modifiez uniquement la taille de la cellule courante.


Objet de la galerie

Étape 3 - Création de la page >

Objet de la galerie

 Return to chapter overview
Montrer/Cacher le texte caché

La diffusion de caméras photos numériques et de services en ligne facilite de façon extraordinaire la publication et le partage de collections photographiques à travers le Web. Ainsi, vous pouvez publier les photos de famille pour les montrer à vos parents et amis lointains ou bien créer des albums et des catalogues pour vos loisirs ou votre travail.

WebSite X5 permet d'insérer des galeries magnifiques pour montrer vos photos et vos vidéos. Les galeries utilisent différents effets et méthodes de navigation et affichage: elles peuvent, par exemple, présenter une barre de contrôle, une séquence ou une grille de miniatures. Peu importe le type, toutes les galeries utilisant JavaScript exploitent spécifiquement HTML5 et CSS3 pour la production d'effets visuels.

Remarques sur la compatibilité avec les versions précédentes:

Galerie en HTML5 contre Galerie en Flash - Les Galeries en HTML5 ont été introduites avec la version 9.1 de WebSite X5 et, dans la version 10 actuelle, se substituent complètement aux précédentes Galeries en Flash.

Le passage aux Galeries en HTML5 est lié au fait que les Galeries en Flash, même si elles permettent un grand nombre d'effets d'affichage, demandent l'installation du Player Flash pour l'affichage et ne sont pas supportées par les dispositifs tablettes et mobiles avec système d'exploitation iOS (par exemple, iPad® et iPhone®). D'autre part, les Galeries en HTML5 sont plus rapides au moment du chargement, ne demandent aucun plug-in et sont affichées correctement sur n'importe quel type de dispositif et système opératif moderne.

Sur les versions des navigateurs qui ne supportent pas HTML5 et CSS3, les Galeries en HTML5 fonctionnent correctement mais tous les effets d'affichage pour les images ne peuvent être reproduit. Dans ces cas, les effets d'affichage non supportés sont automatiquement remplacés avec l'effet Fondu.

Seulement dans le cas où la galerie comprend une vidéo dans un format non supporté par HTML5 ou le navigateur ne supporte pas l'inclusion de vidéos en HTML5, elle sera automatiquement exécutée en Flash pour permettre une bonne lecture

Certaines Galeries disponibles proposent une grille ou une bande de miniatures et utilisent la fenêtre Showbox pour l'affichage des images agrandies correspondantes. Dans ce cas, le visiteur clique sur une miniature et ouvre l'image ou la vidéo correspondante dans une fenêtre superposée à la page principale. À ce stade, en plaçant la souris sur l'image rappelée, le visiteur affiche les boutons qui lui permettent de passer directement à l'image précédente / suivante sans devoir revenir aux miniatures.

Vous pouvez entièrement personnaliser l'aspect de la fenêtre ShowBox à l'aide des options présentes dans la section Styles et modèles | Boîte d'affichage de l'étape 4 - Paramètres avancés.

Les commandes nécessaires pour la création d'un Objet de la galerie sont articulées dans les sections suivantes: Style, Liste et Miniatures.

Cliquez pour etendre/reduire Référence: les commandes de la Section Style

À travers les commandes de cette section vous choisissez le type de Galerie à réaliser et vous définissez les paramètres généraux.

Les Galeries disponibles sont les suivantes:

Cliquez pour etendre/reduire | Diaporama classique C'est une galerie où les images et les vidéos sont présentées en séquence, l'une après l'autre: si vous sélectionnez cette option, le mode d'affichage des images dépend du type d'effet d'entrée. Le passage d'une image à l'autre peut être géré à l'aide des commandes de la barre de commande. Dans la barre de commande, vous pouvez prévoir l'affichage de petites miniatures pour permettre à l'utilisateur d'ouvrir immédiatement les images ou les vidéos.
Cliquez pour etendre/reduire | Galerie horizontale Cette Galerie propose une série de miniatures, positionnées horizontalement au-dessus ou au-dessous de l'image du premier plan. Il suffit de pointer avec la souris les miniatures pour les faire défiler vers la droite/gauche: si vous cliquez sur une miniature, l'image ou la vidéo correspondante s'affiche en premier plan. Les images agrandies sont affichées en fonction de l'effet d'entrée éventuellement défini.
Cliquez pour etendre/reduire | Galerie verticale Cette Galerie est semblable à la précédente. Toutefois elle présente les miniatures affichées verticalement à droite ou à gauche par rapport à l'image en premier plan.
Cliquez pour etendre/reduire | Miniatures Cette Galerie présente une grille contenant toutes les miniatures: si vous cliquez sur une miniature, l'image ou la vidéo correspondante s'ouvre en premier plan dans la Boîte d'affichage (ShowBox).
Cliquez pour etendre/reduire | Miniatures par cadre Cette Galerie est semblable à la précédente mais, si vous devez entrer de nombreuses images, elle permet de les afficher en miniatures en définissant le nombre maximum de rangées de miniatures à afficher: l'utilisateur pourra passer d'une miniature à l'autre, à l'aide des boutons appropriés, en restant toujours sur la même page du site.
Cliquez pour etendre/reduire | Miniatures horizontales Cette Galerie montre une seule bande horizontale de miniatures. Si vous cliquez sur une miniature, l'image ou la vidéo apparaît dans la Boîte d'affichage (ShowBox).
Cliquez pour etendre/reduire | Miniatures verticales Cette Galerie, semblable à la précédente. Elle présente toutefois les miniatures verticalement.

Selon le type de Galerie sélectionnée, sont proposés Paramètres et options pour gérer les Commandes de navigation différentes.

Paramètres: | Diaporama classique | Galerie horizontale | Galerie verticale
§Taille maximale: définit la taille maximale en pixels de la largeur et de la hauteur que les images peuvent prendre. En laissant active l'option Conserver la proportion, dans la définition de la taille la proportion entre la largeur et la hauteur est maintenue inchangée. | P | P | P
§Miniatures visibles: permet de définir le nombre de miniatures à afficher à côté de l'image principale. | - | P | P
§Position des miniatures: permet de définir où doivent être affichées les miniatures par rapport à l'image principale. | - | P | P
§Description du police:spécifie le type de Police, le Style et la taille du texte. Ces formats sont utilisés pour les légendes créées avec le champ Description présent dans la section Liste. | P | P | P
§Bande sonore: permet de définir un fichier musique à lire comme une bande sonore lors de la visualisation de la galerie. | P | P | P
§Lecture automatique: permet de lancer automatiquement l'affichage d'images et de vidéos dès que la Galerie est affichée. | P | P | P
§Affichage aléatoire: les images et les vidéos ne sont pas proposés en fonction de l'ordre d'entrée mais d'une séquence fortuite. | P | P | P
Commandes de navigation:
§Affichage des boutons: permet de définir si et comment sont affichés les boutons de navigation directement sur les côtés de l'Image principale de la Galerie pour permettre à l'utilisateur de passer à celle précédente/suivante. Il est possible de faire en sorte que ces boutons soient Toujours visibles, Non visibles (exécution automatique) ou Visibles au survol de la souris. | P | - | -
§Style des Boutons: permet de définir le style des boutons affichés directement sur les côtés de l'Image principale de la Galerie, choisis entre les projets graphiques proposés. | P | - | -
§Afficher la barre de commandes: activée par défaut, elle permet de définir l'affichage, au passage de la souris, d'une Barre de commande pour gérer la navigation entre les images et les vidéos de la Galerie. Comme base, la Barre de commande présente les boutons [image] Démarrer présentation, [image] Image précédente et [image] Image suivante. | P | P | P
§Couleur: permet d'indiquer la couleur de la Barre de commande. | P | P | P
§Afficher les Miniatures dans la barre de commandes: activée par défaut, cette option ajoute une liste de miniatures des Images de la Galerie dans la Barre de commande, qui s'affiche au passage de la souris. Ainsi l'utilisateur n'est pas obligé de consulter les images dans l'ordre, mais il peut afficher immédiatement les images ou les vidéos qui l'intéressent. | P | - | -

Paramètres: | Miniatures | Miniatures par cadre | Miniatures horizontales | Miniatures verticales
§Miniatures visibles: permet de définir combien de miniatures il faut effectivement afficher. | P | - | P | P
§Lignes par page: permet de définir le nombre de lignes de la matrice où les miniatures sont organisées. | - | P | - | -
§Afficher l'image agrandie sur clic dans une boîte d'affichage: cette option permet de définir sur la miniature le lien qui mène à l'affichage de l'image ou de la vidéo correspondante à l'intérieur de la Boîte d'affichage | P | P | P | P
§Taille maximale: disponible seulement si l'option Afficher l'image agrandie sur clic dans une boîte d'affichage est sélectionnée, elle permet de définir la valeur maximum de la largeur et de la hauteur de la Boîte d'affichage. En laissant active l'option Conserver la proportion, dans la définition de la taille la proportion entre la largeur et la hauteur est maintenue inchangée. | P | P | P | P
Cliquez pour etendre/reduire Référence: les commandes de la Section Liste

Les commandes de cette section vous permettent de composer la liste des images et des vidéos à insérer dans la Galerie.

Tous les fichiers déjà importés sont affichés dans la Liste des fichiers: si vous sélectionnez un fichier dans la liste, vous pouvez voir son aperçu dans la fenêtre appropriée.

Pour chaque image et vidéo insérée, la Liste des fichiers indique le chemin du fichier, l'effet d'entrée éventuellement associé, une coche signalant l'association d'un lien et d'une description.

Voici les commandes disponibles pour composer l'objet Galerie:

§Ajouter... / Supprimer: permettent d'ajouter de nouveaux fichiers ou de supprimer les fichiers sélectionnés parmi ceux déjà insérés. Vous pouvez importer des fichiers graphiques au format: .JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF. Par ailleurs, vous pouvez importer des fichiers vidéos au format: .FLV et .MP4.
Si vous cliquez sur le triangle du bouton Ajouter..., vous affichez un sous-menu offrant les options suivantes: Ajouter une image..., Ajouter une vidéo... et Ajouter YouTube Video/Vimeo....

Cliquez pour etendre/reduire

La fenêtre rappelée à l'aide de la commande Ajouter YouTube Video/Vimeo... permet d'indiquer l'adresse URL de la vidéo déjà publiée sur des portails comme YouTube™ ou Vimeo que vous voulez insérer.

§En haut / En bas: permettent de déplacer le fichier sélectionné avant/après le fichier précédent/suivant dans la Liste des fichiers.

§Modifier...: permet de rappeler l'Editeur d'image interne pour modifier l'image sélectionnée dans la Liste des fichiers.

En fonction du type de Galerie choisie, pour chaque image/vidéo insérée, vous pouvez définir certaines Options:

§Lien: permet de définir un lien sur l'image/vidéo sélectionnée parmi celles présentes dans la Liste des fichiers.

§En cliquant sur le bouton [image] on appelle la fenêtre Lien qui permet de choisir le type d'action autre que les options relatives. Dans le cas des Galeries qui utilisent les Miniatures, le lien ainsi défini remplace celui de l'Image agrandie même si vous activez l'option Afficher l'image agrandie sur clic dans une boîte d'affichage.

§Effet: définit, à travers la fenêtre Propriétés de l'effet appelé en cliquant sur le bouton [image] un effet d'entrée, mouvement et zoom sur l'Image/Vidéo sélectionnée parmi celles présentes dans la Liste des fichiers.

Sur les versions des navigateurs qui ne supportent pas HTML5 et CSS3, les Galeries en HTML5 fonctionnent correctement mais tous les effets d'affichage pour les images ne peuvent être reproduit. Dans ces cas, les effets d'affichage non supportés sont automatiquement remplacés avec l'effet Fondu.

§Description: permet d'insérer un texte de description pour l'image ou la vidéo sélectionné dans la Liste des fichiers. Le texte de description figure au bas de la fenêtre montrant l'image ou la vidéo agrandi
Cliquez pour etendre/reduire Référence: les commandes de la Section Miniatures

Les commandes de cette section permettent de définir l'aspect graphique des miniatures des Galeries qui les composent.

La miniature, créée automatiquement par le programme, est une version rétrécie de l'image ou de la vidéo insérée dans la Galerie. Pour qu'elles soient plus belles, les miniatures sont présentées dans un cadre comme les diapositives, les photogrammes d'une pellicule, les post-it, etc.

Pour définir l'aspect des miniatures, vous pouvez utiliser:

§Image prédéfinie: permet de choisir le cadre à appliquer aux miniatures en le sélectionnant parmi ceux proposés.

§Image personnalisée: permet de rappeler le fichier graphique (au format .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WPG) correspondant au cadre à utiliser.

Pour créer un nouveau cadre, il suffit de préparer l'image et de l'enregistrer dans un fichier spécifique: il est préférable que l'image du cadre soit carrée et s'il faut maintenir une transparence externe, enregistrez-la sous le format .PNG.

Pour les miniatures, vous disposez également des Options:

§Marge extérieure (%): permet de définir la marge qu'il faut maintenir entre l'image de la miniature et le cadre qui l'entoure.

§Activer variante de couleur: si vous sélectionnez cette option, vous pouvez définir la couleur vers laquelle tendra le cadre des miniatures. Vous appliquez donc un effet "Colorisé" au cadre de sorte qu'il tende vers la couleur voulue.

L'effet variante de couleur ne peut pas être utilisé sur des cadres noirs ou blancs: si tel est le cas, l'option "Colorisé" n'entraîne aucune variation de couleur.

Les galeries peuvent être lancées via un lien spécial inséré dans les pages: pour plus d'informations, voir Lien.


Objet Vidéo/Son

Étape 3 - Création de la page >

Objet Vidéo/Son

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 permet de créer des sites capables de susciter un réel intérêt chez les utilisateurs, par exemple avec des vidéos et des morceaux de musique.

Actuellement les vidéos ont atteint un niveau de diffusion qui était impensable il y a quelques années: faire une vidéo, la mettre sur l'ordinateur, l'éditer et la mettre sur le web est aujourd'hui un processus à la portée de tous.

Avec WebSite X5 vous pouvez importer très simplement n'importe quel type de vidéo, l'insérer dans votre site et ainsi le partager. WebSite X5 accepte tous les principaux formats et utilise un lecteur interne pour reproduire les fichier .FLV et .MP4. Il permet de définir des fichiers locaux et des fichiers déjà publiés en ligne, y compris ceux des portails comme YouTube™ et Vimeo.

Les commandes nécessaires pour procéder à la création d'un Objet Vidéo/Son sont organisées dans les sections suivantes: Général et Plan du site.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les commandes de cette section permettent d'importer le fichier à utiliser pour la création de l'Objet Vidéo/Son et vous pouvez définir quelques paramètres relatifs aux modalités de reproduction.

L'Objet Vidéo/Son peut être inséré en modes différents selon l'emplacement de la ressource à importer:

§Fichier local sur l'ordinateur: quand cette option est activée, il suffit de cliquer sur le bouton [image] pour parcourir les ressources disponibles sur l'ordinateur local et déterminer le fichier au format .MP4, .WEBM, .OGG, .FLV, .AVI, .WMV, .MPG, .MOV, .MP3, .WMA, .WAV, .MID, .AIF, .M4A à importer.

§Fichier Internet: quand cette option est activée, il faut taper dans le champ approprié l'adresse URL à laquelle le fichier de la vidéo ou de l'audio est déjà disponible en ligne.

§URL YouTube Video/Vimeo: quand cette option est activée, il faut taper dans le champ approprié l'adresse URL de la page de portails comme YouTube™ ou Vimeo contenant les Vidéos/Sons à importer.

Quand vous insérez de cette façon une vidéo publiée sur YouTube™, les dimensions d'origine sont modifiées en fonction des paramètres de WebSite X5. Pour mieux contrôler les dimensions, il est conseillé d'importer la vidéo YouTube™ à travers l'Objet HTML et Widgets et non pas à travers l'Objet Vidéo/Son.

Pour afficher l'aperçu de l'objet Vidéo/Son importé, sélectionnez l'option Aperçu dans la fenêtre appropriée.

Selon le format du fichier Vidéo/Son importé, le programme utilise un lecteur différent pour l'affichage/reproduction. Pour les fichiers au format .MP4, .WEBM et .OGG, si le navigateur supporte le tag vidéo de HTML5 et le codec du fichier, est utilisé le support propre au navigateur par WebSite X5 Media Player. Dans le cas contraire, et pour tous les autres formats, ce qui suit s'applique:

Player | Fichier Video | Fichier Audio
Adobe Flash Player® | .MP4 et .FLV | .MP3
Microsoft® Windows Media Player® | .AVI, .WMV et .MPG | .WAV et .WMA
QuickTime® Player | .MOV | .M4A et .AIF

Pour assurer une compatibilité maximale, nous vous recommandons d'utiliser le format .MP4.

Quel que soit le lecteur utilisé pour l'affichage/reproduction du fichier importé, vous pouvez définir les Propriétés suivantes:

§Texte alternatif: permet d'insérer le texte qui remplace la vidéo ou l'audio ne pouvant pas être affiché.

§Taille: permet d'indiquer les dimensions en pixels de la largeur de la vidéo ou de la barre de commande du son. L'expression entre parenthèses indique la valeur maximum admise pour la largeur de l'objet: cette valeur est déterminée par la Grille de mise en page définie. Pour les Sons, entre parenthèses est indiqué que la valeur maximum admise pour la hauteur de la Barre de commande est 35 pixels. La valeur minimum est, au contraire, de 15 pixels. En laissant active l'option Conserver la proportion, dans la définition de la taille la proportion entre la largeur et la hauteur est maintenue inchangée.

§Lecture automatique: permet de prédisposer le lancement automatique de la reproduction de la vidéo ou de l'audio.

§Activer l'affichage plein écran: si vous sélectionnez cette option, la barre de commande contient une option permettant de mettre en plein écran la fenêtre affichant la vidéo.

Il est possible aussi gérer l'affichage de la Barre de contrôle:

§Afficher la barre de commandes: permet d'afficher une barre d'outils contenant toutes les commandes nécessaires pour gérer des vidéos et des audios.

Si pour l'affichage/reproduction du fichier importé vous utilisez seulement WebSite X5 Media Player, pour la gestion de la Barre de contrôle vous disposez également des options suivantes:

§Cacher automatiquement la barre de commandes: si vous sélectionnez cette option, la barre de commande n'est affichée que lors du passage de la souris sur la fenêtre de reproduction du Vidéos/Audios.

§Couleur: permet d'indiquer la couleur d'arrière-plan de la barre de commande.

Pour les Vidéos au format Microsoft® ou QuickTime®, WebSite X5 Media Player n'est pas utilisé et ceci ne permet pas de garantir une gestion correcte de la Barre de commande.
Cliquez pour etendre/reduire Référence: les commandes de la Section Plan du site

Les commandes de cette section permettent d'insérer dans le Plan du site les informations supplémentaires sur la vidéo sur laquelle vous êtes en train de travailler.

Sélectionnez tout d'abord l'option Ajouter la vidéo à la carte du site: ainsi le Plan du site qui est créé automatiquement par WebSite X5 (voir, Créer automatiquement le SiteMap dans Paramètres généraux | Avancées) est complété par les informations relatives à la vidéo. À ce stade, vous devez définir les paramètres suivants:

§Titre: (paramètre obligatoire) indiquez un titre pour la vidéo. La limite imposée par Google™ pour la longueur des titres est de 100 caractères.

§Brève description: (paramètre obligatoire) indiquez un bref texte descriptif pour la vidéo. La limite imposée par Google™ pour la longueur des descriptions est de 2048 caractères: les descriptions plus longues sont coupées.

§Catégorie: (paramètre optionnel) indiquez une catégorie à laquelle la vidéo pourrait appartenir en raison de son contenu. Google™ spécifie que chaque vidéo peut appartenir à une seule catégorie et fixe la longueur du nom de la catégorie à 256 caractères.

§Mots-clé pour la recherche: (paramètre optionnel) indiquez une liste de tag, à savoir des brèves descriptions des concepts clés associés à la vidéo. Google™ spécifie que chaque vidéo peut avoir au maximum de 32 tags.

§Aperçu de l'image pour la vidéo: (paramètre obligatoire) indiquez une image d'aperçu à associer à la vidéo. Google™ conseille d'utiliser pour ces miniatures une dimension minimum de 120x90 pixels et de les enregistrer au format .JPG, .PNG ou .GIF.

§Date de publication: (paramètre optionnel) indiquez la date de publication de la vidéo.

§Durée (sec.): (paramètre optionnel) indiquez la durée en secondes de la vidéo. Google™ recommande fortement d'insérer cette information et il précise que la valeur insérée doit être comprise entre 0 et 28800 (équivalant à 8 heures).

§Contenu adapté à tous: (paramètre optionnel) indiquez si le contenu de la vidéo convient à un public mineur. Google™ informe que si une vidéo n'est pas définie comme appropriée aux mineurs, elle ne sera disponible que pour les utilisateurs dont le filtre Google Safesearch™ est désactivé. Nous vous rappelons que la fonction SafeSearch de Google™ filtre les sites avec des contenus sexuels ou pornographiques explicites et les supprime des résultats de la recherche.

Bonnes pratiques:

-

Comment créer et connecter le Plan du Site


Objet Formulaire d'envoi d'email

Étape 3 - Création de la page >

Objet Formulaire d'envoi d'email

 Return to chapter overview
Montrer/Cacher le texte caché

Lorsque on navigue sur Internet, on rencontre souvent des pages contenant des formulaires à remplir pour envoyer les données collectées via e-mail. Ces formulaires sont utilisés comme de simples formulaires de contact, pour demander l'inscription à des services particuliers ou l'accès à des zones réservées à travers un mot de passe ou bien pour effectuer des sondages et des recherches.

Quel que soit le but, WebSite X5 permet de créer très facilement un formulaire d'envoi email, d'indiquer les champs nécessaires, d'agir sur la mise en page et l'aspect graphique et, surtout, d'établir comment doivent avoir lieu l'envoi et la collecte des données.

Les commandes nécessaires pour procéder à la création d'un Objet Formulaire d'envoi e-mail sont organisées dans les sections suivantes: Liste, Envoi et Style.

Cliquez pour etendre/reduire Référence: les commandes de la Section Liste

Les commandes de la section Liste de la fenêtre Objet du formulaire e-mail permettent de définir la liste des champs composant le formulaire e-mail.

Tous les champs créés sont affichés dans un tableau récapitulatif qui indique, pour chacun d'entre eux: Nom de champ, Type de champ, Largeur, si la réponse a été définie comme Obligatoire et Description. Tous ces paramètres peuvent être définis pendant la phase de création du champ, dans la fenêtre Insertion de champ.

Le tableau, qui résume les données principales de tous les champs insérés, est un outil utile permettant d'exécuter différentes opérations:

§Si vous double-cliquez sur un champ, vous ouvrez la fenêtre Insertion de champ permettant de modifier ce champ;

§Si vous cliquez deux fois sur un champ déjà sélectionné, vous pouvez modifier son nom: ce qui équivaut à ouvrir la fenêtre Insertion de champ et à modifier le texte inséré comme Étiquette;

§Après avoir sélectionné un champ, vous pouvez utiliser les boutons disponibles sur le côté pour créer une copie, le supprimer, le déplacer en haut ou en bas et modifier les paramètres.

Par ailleurs, le tableau vous permet de contrôler l'emplacement des champs dans le formulaire. Tout d'abord, les tirets indiquent les lignes où se trouvera le formulaire. Par ailleurs, si un champ est placé en regard du champ précédent, près de l'indication de sa largeur, vous verrez l'icône [image]. Enfin, si la largeur des champs placés côte à côte sur la même ligne dépassent 100% de l'espace disponible, l'icône avec le point d'exclamation [image] signale l'erreur: si vous ne modifiez pas leur largeur, les champs seront placés sur des lignes différentes.

À côté du tableau se trouvent les commandes permettant de créer la liste des champs composant le formulaire:

§Ajouter...: permet de rappeler la fenêtre Insertion de champ pour entrer un nouveau champ dans le formulaire.

§Dupliquer: permet de créer une copie du champ sélectionné parmi ceux figurant dans le formulaire.

§Supprimer: permet de supprimer le champ sélectionné parmi ceux figurant dans le formulaire.

§En haut / En bas: permettent, respectivement, de déplacer le champ sélectionné avant ou après le champ précédent ou suivant parmi ceux déjà insérés dans le formulaire.

§Modifier...: permet de rappeler la fenêtre Insertion de champ pour modifier les paramètres du champ sélectionné parmi ceux déjà insérés dans le formulaire.

Les boutons Envoyer, pour l'envoi du formulaire rempli, et Réinitialiser, pour effacer toutes les données eventuellement insérées dans le formulaire, sont automatiquement créés par le Programme et positionnés à la fin du formulaire.
Cliquez pour etendre/reduire Référence: les commandes de la Section Envoi

Les commandes de cette section permettent de définir les modalités relatives à l'envoi des données collectées à travers le formulaire d'envoi par e-mail créé.

Dans le cadre Envoi des données, indiquez comment les données collectées à travers le formulaire doivent être envoyées au gérant du site. Vous disposez des options suivantes:

Envoyer les données via e-mail: c'est l'option prévue par défaut. Les données saisies dans le formulaire sont envoyées via e-mail en exploitant un script PHP déjà prédisposé.

Envoyer les données à une base de données: les données saisies dans le formulaire sont envoyées automatiquement à la base de données MySQL indiquée, à travers un script PHP déjà prédisposé.

Envoyer les données à un fichier: les données saisies dans le formulaire sont gérées en exploitant le script indiqué (PHP, ASP, etc.). Cette option est utile si vous voulez utiliser votre propre script, par exemple pour envoyer les données si PHP n'est pas disponible sur votre serveur, ou si vous voulez activer des procédures et des gestions particulières.

Selon la méthode d'envoi sélectionnée, il faut indiquer une série de paramètres:

Envoyer les données via e-mail:

§Adresse e-mail de l'expéditeur: si vous sélectionnez cette option, vous pouvez indiquer l'adresse à utiliser comme expéditeur de l'e-mail envoyé avec les données saisies dans le formulaire créé.
Par défaut, le programme utilise comme e-mail de l'expéditeur celui du destinataire qui, dans ce cas, correspond au gérant du site. Si vous indiquez comme e-mail de l'expéditeur l'adresse de l'utilisateur qui a rempli le formulaire, vous pourrez, par exemple, utiliser directement la commande Répondre du programme de Courriel.

§Destination adresse e-mail : permet de définir l'adresse à laquelle il faut envoyer les données. Vous pouvez indiquer plus d'une adresse e-mail: pour ce faire, tapez toutes les adresses email séparées d'un point-virgule.

§Objet: permet de définir l'objet de l'e-mail contenant les données collectées.

§Message: permet de taper le texte qui introduit dans le message les données collectées.

§Ajouter les données collectées au format CSV: permet d'enregistrer les données collectées également dans un fichier au format CSV joint à l'e-mail. Dans un fichier CSV, les données sont indiquées sous forme textuelle, comme une longue liste d'éléments séparés par un point-virgule: vous pouvez importer facilement ces fichiers dans les programmes de gestion des feuilles de calcul (par ex. Microsoft Excel).

Envoyer les données à une base de données:

§Nom de la base de données: spécifie le nom de la base de données à utiliser, choisissant dans la liste de celles qui sont liées au projet actuel. La liste des bases de données liées au projet doit d'abord être remplie en utilisant les commandes appropriées de la fenêtre Gestion des données.

§Nom de table: dans ce champ, vous devez entrer le nom de la table dans la base de données dans laquelle vous voulez collecter des données. Si vous entrez le nom d'une table qui n'existe pas encore, elle sera créée automatiquement.

§Envoyer un e-mail pour informer que les données ont été reçues: cette option permet d'envoyer automatiquement une notification par e-mail lorsque de nouvelles données sont reçues.

§Destination adresse e-mail: spécifie l'adresse à laquelle envoyer la notification par e-mail de la réception des données.

Envoyer les données à un fichier:

§Fichier de script (par ex., PHP, ASP): permet de définir le fichier de traitement à utiliser pour collecter les données du formulaire et les envoyer. Dans ce cas, le fichier de traitement doit être créé manuellement pour exécuter la tâche voulue.

Dans le cadre Mail de confirmation pour l'utilisateur, si comme méthode d'Envoi des données vous n'avez pas choisi Envoyer les données à un fichier, les options suivantes sont disponibles:

§Envoyer un mail de confirmation à l'utilisateur: si vous sélectionnez cette option, après avoir rempli le formulaire et envoyé les données, l'utilisateur recevra automatiquement un e-mail de confirmation.

§Adresse e-mail de l'expéditeur: si vous sélectionnez cette option, vous pouvez taper une adresse e-mail valide et active à utiliser comme expéditeur de l'e-mail de confirmation.
Par défaut, le programme utilise comme e-mail de l'expéditeur, dans ce cas celui du gérant du site, l'adresse saisie comme Destination adresse e-mail de la section Envoi des données. Si vous tapez une Adresse e-mail de l'expéditeur différente, vous pouvez envoyer l'e-mail de confirmation à partir d'une adresse différente de celle où arrivent les e-mails venant du formulaire. Cette option est utile si vous préférez utiliser pour les communications avec les utilisateurs une adresse générique (info@monentreprise.com ou noreply@monentreprise.com) au lieu d'une adresse personnelle (prénom.nom@monentreprise.com).

§Destination adresse e-mail : permet d'indiquer dans quel champ du formulaire le programme doit prendre l'adresse courriel de l'utilisateur qui doit recevoir l'e-mail de confirmation.

§Objet: permet de définir l'objet de l'e-mail de confirmation.

§Message: permet d'indiquer le message de l'e-mail de confirmation.

§Ajouter les données collectées: permet de joindre l'e-mail de confirmation des données saisies dans le formulaire.

Enfin, dans le cadre Options les options suivantes sont présentées:

§Activer le contrôle anti-spam 'Captcha': permet d'ajouter, au terme du formulaire, le contrôle anti-spam du Captcha. Le programme insère l'image de quelques lettres déformées sur un arrière-plan flou: l'utilisateur doit recopier correctement les lettres dans un champ approprié pour pouvoir envoyer le message.

§Confirmation après envoi des données: permet d'accéder au plan du site pour définir la page à visualiser automatiquement quand le formulaire sera rempli et les données envoyées via e-mail. Au lieu de renvoyer directement à la Page d'accueil, il vaut mieux créer une page spécifique avec un message de remerciements: cette page devra être définie comme Page invisible dans le menu à l'aide de la commande disponible dans l'étape 2 - Création du plan.

Pour personnaliser l'aspect graphique des e-mails envoyés automatiquement à travers le formulaire créé, utilisez les options proposées dans la fenêtre Styles et modèles | E-mail de l'étape 4 - Paramètres avancés.
Cliquez pour etendre/reduire Référence: les commandes de la Section Style

Les commandes permettent de définir certains paramètres graphiques du formulaire que vous êtes en train de créer.

Vous devez, tout d'abord, sélectionnez l'Élément du formulaire sur lequel vous voulez travailler: pour cela, utilisez le menu à liste déroulante ou cliquez directement sur l'élément dans la fenêtre Aperçu.

Voici les éléments sur lesquels vous pouvez agir:

Étiquettes: c'est le texte qui décrit le champ où vous pouvez taper l'information requise ou le texte de la question à poser.

Champs: c'est le cadre où l'utilisateur pourra saisir l'information requise.

Boutons 'Envoyer' et 'Réinitialiser': ces boutons sont insérés automatiquement au bas du formulaire d'envoi d'e-mail. Ils servent, respectivement, à envoyer toutes les données entrées dans les champs et à supprimer les valeurs éventuellement présentes dans les champs

Description de champ et validation: il s'agit de messages donnant des informations supplémentaires sur la manière de remplir les champs, invitant à corriger une donnée saisie ou invitant à remplir un champ obligatoire.

En fonction de l'élément du formulaire sélectionné, vous pouvez agir sur les différentes options de la section Style:

Étiquettes:

§Police: spécifie le type de Police, le Style et la taille du texte.

§Couleur: permet d'indiquer la couleur à utiliser pour le texte.

§Disposition: permet de définir où l'étiquette doit être placée par rapport au champ. Vous disposez des trois options suivantes: Afficher les étiquettes au-dessus des champs, Afficher les étiquettes à l'intérieur des champs et Afficher les étiquettes à gauche des champs. Si vous positionnez les étiquettes à gauche des champs, vous pouvez définir la (%) largeur, à savoir le pourcentage d'espace de la ligne qui sera occupée par l'étiquette, et l'Alignement du texte de l'Étiquette.

Champs:

§Couleur: permet d'indiquer la couleur qui doit être utilisée pour le texte (en état normal et "sur sélection"), pour l'arrière-plan (en état normal et "sur sélection") et pour la bordure (en état normal et "sur erreur").

§Coins arrondis: définit le facteur d'arrondissement pour les angles.

§Ombre: permet de définir une ombre dans les champs afin de donner un sens de profondeur.

Boutons 'Envoyer' et 'Réinitialiser':

§Police: spécifie le type de Police, le Style et la taille du texte.

§Couleur: spécifie la couleur qui doit être utilisée pour le texte, pour l'arrière-plan et pour la bordure des boutons.

§Coins arrondis: définit le facteur d'arrondissement pour les angles.

§Image d'arrière-plan: sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan.

§Afficher le bouton 'Réinitialiser': activée par défaut, elle affiche automatiquement au bas du formulaire le bouton "Réinitialiser" (qui permet de vider les champs déjà remplis) en plus du bouton "Envoi".

Description de champ et validation:

§Fichier icône Description de champ: permet d'importer un fichier graphique (format .JPG, .GIF et .PNG) à utiliser comme icône à associer au champ pour indiquer la disponibilité d'autres informations.

§Afficher la description sur la sélection de champ: si vous sélectionnez cette option, le message contenant les informations supplémentaires s'affiche automatiquement quand vous cliquez sur le champ.

§Si une erreur survient au cours de la validation des données: permet de choisir comment doit apparaître le message prévu au cas où un champ ne serait pas rempli correctement ou si un champ Obligatoire est laissé vide. Vous disposez des options suivantes: Afficher la fenêtre de dialogue du navigateur, Afficher la fenêtre contextuelle interne ou Afficher le Conseil à côté du champ invalide.

Quand vous testez le fonctionnement du Site créé localement, une fenêtre vous avertit que l'e-mail avec les données recueillies par le formulaire ne sera pas envoyé. Le Formulaire envoi d'e-mail ne fonctionne pleinement qu'avec la publication du site sur serveur.

Pour le bon fonctionnement du formulaire envoyé par e-mail il est nécessaire que le serveur sur lequel le site sera publié supporte le langage de programmation PHP et que la commande MAIL soit active. Grâce à la section Test du Site du Panneau de contrôle en ligne, vous pouvez avoir ces informations de diagnostic sur le serveur.

Si vous rencontrez des problèmes pour envoyer des e-mails il est probable que le serveur n'est pas configuré selon le standard. Dans ces cas, vous devriez essayer de changer les paramètres du script et la méthode utilisée pour l'envoi d'e-mail via les options appropriées dans Paramètres avancés | Gestion des données. Pour plus d'informations, contactez votre fournisseur d'espace web.


Fenêtre Insertion de champ

Étape 3 - Création de la page > Objet Formulaire d'envoi d'email >

Fenêtre Insertion de champ

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtre Insertion de champ, appelée à partir des boutons Ajouter... et Modifier... présents dans la fenêtre Objet Formulaire d'envoi d'email, permet de procéder à la création et à la définition effectives des Champs qui composeront le Formulaire d'Envoi E-mail.

Cette fenêtre présente les options suivantes: Type de champ et Options.

Cliquez pour etendre/reduire Référence: les commandes de la Section Type de champ

Les options de cette section permettent de créer la liste des champs composant le formulaire d'envoi e-mail.

Vous disposez des types de champ suivants:

Champ textuel: champ de texte disposé sur une seule ligne qui est affiché comme une case vide où l'utilisateur peut entrer librement la réponse la plus appropriée.

Courriel: champ de texte spécifique pour demander à l'utilisateur de fournir une adresse e-mail. Dans ces cas, le programme défini automatiquement un filtre pour contrôler si la donnée saisie est correcte: par exemple, pour qu'une adresse soit valide, elle doit contenir le caractère "@" et un point dans le texte qui suit.

Zone de texte: champ de texte disposé sur plusieurs lignes permettant à l'utilisateur d'entrer un commentaire ou une question.

Date: champ de texte où l'utilisateur doit entrer une date. La date requise peut être entrée ou définie à l'aide du calendrier.

Liste déroulante: les réponses possibles sont définies dans une liste où l'utilisateur ne pourra en choisir qu'ene seule.

Liste: il s'agit d'une liste de réponses parmi lesquelles l'utilisateur ne pourra en choisir qu'ene seule.

Choix multiple: les réponses sont présentées dans une liste à puces permettant à l'utilisateur de sélectionner plusieurs éléments.

Choix unique: l'utilisateur ne peut sélectionner qu'un seul choix dans la liste.

Mot de passe: champ de texte où les caractères entrés sont automatiquement masqués, à savoir affichés comme des "pois" ou des astérisques (selon le système d'exploitation utilisé). Permet aux utilisateurs d'indiquer le mot de passe d'inscription pour accéder à un service.

Fichier annexé: champ de texte où l'utilisateur, en cliquant sur le bouton [image] permettant de parcourir les ressources disponibles, peut spécifier le fichier à envoyer comme annexe. Pour le bon fonctionnement des fichiers annexés vous devez contacter votre fournisseur d'espace web pour vérifier si le service est actif.

Question de contrôle: champ de texte où l'utilisateur doit entrer la réponse à une question posée dans le but de distinguer les utilisateurs réels des programmes qui exploitent les formulaires de contact publiés en ligne pour envoyer des courriels non désirés.

Conditions d'acceptation: champ de texte où sont indiquées les conditions que l'utilisateur doit accepter pour envoyer les données. Dans ce champ, vous pouvez par exemple entrer la norme de référence sur la confidentialité du traitement des données collectées.

Séparateur: ce n'est pas un champ mais un séparateur graphique qui permet d'organiser les champs en sections et rendre plus accessible les Formulaires long, qui nécessitent d'insérer beaucoup d'informations.

Selon le type de champ sélectionné, différentes options sont présentées sur lesquelles il est possible d'agir. Les options communes à tous les champs sont:

§Étiquette: permet d'insérer la description du champ. Ce texte qui sera affiché au-dessus, à coté ou à l'intérieur du champ, permet de spécifier l'information requise ou d'entrer le texte de la question à poser.

§(%) largeur : permet de définir la largeur du champ qui peut prendre une valeur allant de 5% à 100 % de l'espace disponible.

§Afficher sur la même ligne que le champ précédent: si vous sélectionnez cette option, le champ n'est pas positionné sur une nouvelle ligne mais à côté du champ précédent. Pour mettre deux champs côte à côte sur la même ligne, la somme de leur largeur ne doit pas dépasser 100 % de l'espace disponible.

§Etablir comme champ obligatoire: si vous sélectionnez cette option, la réponse de l'utilisateur est obligatoire. L'option n'est pas disponible pour les champ Choix multiple mais elle est activée par défaut pour les champs Question de contrôle.

En plus des options communes, pour chaque type de champ, vous disposez des options spécifiques suivantes:

Champ textuel:

§Nombre max. de caractères: spécifie le nombre maximum de caractères qu'on peut insérer dans le Champ.

Par exemple, vous pouvez fixer à 15 le nombre maximum de caractères pour un champ de texte destiné à accueillir le code fiscal de l'utilisateur.

§Filtre de saisie du texte: définit un contrôle pour vérifier si les données insérées par l'utilisateur dans le champ sont correctes. Vous pouvez choisir entre ces filtres:

-Aucun (caractères et nombres): permet d'insérer caractères et nombres.

-Chiffres uniquement: permet d'insérer seulement des nombres.

-Numéro de téléphone/fax (chiffres et caractères '-' et ' '): permet d'insérer des nombres, du caractère "-" et de l'espace.

-Date (chiffres et caractères '/' e '.'): permet d'insérer des nombres et du caractère "/".

Courriel:

§Demander une confirmation d'adresse e-mail: ajoute automatiquement un champ dans lequel l'utilisateur doit retaper son adresse e-mail. Le programme vérifie la correspondance exacte de l'adresse e-mail indiquée dans les deux champs et, si nécessaire, il affichera une d'alerte.

Zone de texte:

§Nombre max. de caractères: spécifie le nombre maximum de caractères qu'on peut insérer dans le Champ.

§Nombre de lignes: définit la hauteur du Champ, en spécifiant le nombre de lignes affichées (avec un maximum de 30).

Date:

§Format de date: spécifie le format de la date, en choisissant entre les formats habituels nationaux et internationaux.

§Afficher l'icône 'Calendrier': affiche à côté du champ Date l'icône "Calendrier". En cliquant sur cette icône est affiché un calendrier qui permet à l'utilisateur de définir la date sans avoir à la taper.

Liste:

§Nombre de lignes: définit la hauteur du Champ, en spécifiant le nombre de lignes affichées (avec un maximum de 30).

Choix multiple/Choix unique:

§Nombre de colonnes: permet de définir le nombre de colonnes accueillant les réponses.

Mot de passe:

§Demande de confirmation de mot de passe: si vous sélectionnez cette option, un champ est automatiquement ajouté pour que l'utilisateur saisisse une seconde fois son mot de passe. L'exactitude du mot de passe saisi sera automatiquement contrôlée dans les deux champs et, si nécessaire, un message d'alerte apparaîtra.

Question de contrôle:

§Réponse correcte: permet de définir la réponse correcte qui sera comparée à celle donnée par l'utilisateur.

Conditions d'acceptation:

§Texte de la condition: permet d'insérer le texte des conditions que l'utilisateur doit accepter avant d'envoyer les données.

Enfin, il faut spécifier que pour les champs Liste déroulante, Liste, Choix multiple et Choix unique il est possible créer la liste des réponses possibles à l'aide les commandes suivantes:

§Ajouter / Supprimer: permettent, respectivement, d'ajouter une nouvelle réponse ou de supprimer la réponse sélectionnée.

§En haut / En bas: permettent, respectivement, d'agir sur la commande d'affichage des réponses possibles, en déplaçant vers le haut ou le bas celle sélectionnée.

§Modifier: permet de modifier la modalité de réponse sélectionnée. Vous pouvez également cliquer une deuxième fois sur un élément déjà sélectionné afin de le modifier.
Cliquez pour etendre/reduire Référence: les commandes de la Section Options

Les options présentes dans cette section permettent de gérer quelques propriétés avancées des Champs d'un Formulaire pour l'Envoi d'E-mail.

Les options disponibles sont:

§Description de champ: permet d'insérer un message utile, par exemple, expliquant à l'utilisateur le type d'information qu'il doit taper dans le champ ou comment répondre. Dans le cas où il est présent, une icône (personnalisable) apparaît à côté du champ indiquant la disponibilité d'autres informations: quand vous passez la souris sur cette icône, vous affichez une info-bulle contenant les informations disponibles.

§attribut <nom>: permet d'indiquer la valeur à associer à l'attribut <name> du champ lors de la création du code HTML relatif au formulaire. Cette option est utile quand, par exemple comme méthode d'Envoi des données (voir: Objet Formulaire d'envoi d'email | Envoi), vous définissez Envoyer les données à un fichier.

§Nom de champ de base de données: permet d'indiquer le nom à affecter au champ pour que la donnée saisie puisse être correctement reconnue et insérée dans une base de données. Cette option est utile quand, par exemple comme méthode d'Envoi des données (voir: Objet Formulaire d'envoi d'email | Envoi), vous définissez Envoyer les données à une base de données.


Objet Réseau Social

Étape 3 - Création de la page >

Objet Réseau Social

 Return to chapter overview
Montrer/Cacher le texte caché

Il est probable que chacun de nous fait maintenant partie d'un ou plusieurs Réseaux Sociaux: on peut partager des messages, photos, vidéos ou tout autre contenu ce qui permet de construire notre profil en ligne, on tisse des liens et on élargit constamment les cercles de nos contacts.

Si, à ce moment, la plupart des gens sont en interaction en ligne sur les Réseaux Sociaux, il est important de réussir à connecter votre site Web avec les profils des différents canaux sociaux ouverts. WebSite X5 permet d'obtenir ce résultat à travers l'Objet Réseau Social, qui utilise les plug-in fournis par les Réseaux Sociaux plus connus: Facebook, Google+, Twitter, Pinterest. De toute évidence, les résultats atteints varient en fonction du plug-in choisi, mais, en général, ils ont tous pour objectif de transformer les Visiteurs du site Web en de nouveaux contacts sur les réseaux sociaux, et en encourageant le partage des contenus proposés.

Cliquez pour etendre/reduire Référence: les Réseaux Sociaux disponibles

Tout d'abord il faut sélectionner dans la liste Réseau Social quel élément insérer. Les éléments disponibles sont:

§AddThis - Boutons 'Partager': permet d'insérer une barre d'outils avec des boutons et/ou un menu que le Visiteur peut utiliser pour sélectionner un Réseau Social sur lequel partager les contenus proposés avec le cercle de ses contacts.

Pour plus d'informations sur le fonctionnement du plug-in Social de AddThis, voir: http://www.addthis.com/social-plugins

§Facebook - Cadre des Commentaires: permet d'insérer un cadre de Facebook où les Visiteurs peuvent laisser leurs commentaires.

§Facebook - Cadre 'J’aime': permet d'insérer un cadre qui permet aux Visiteurs de lire les derniers messages publiés sur une Page Facebook et de cliquer directement sur le bouton "J’aime" pour suivre.

§Facebook - Bouton 'J'aime': permet d'insérer le bouton "J’aime" qui permet aux Visiteurs de partager les contenus avec leurs amis sur Facebook.

Pour plus d'informations sur le fonctionnement du plug-in Social de Facebook, voir: https://developers.facebook.com/docs/plugins/

§Google Plus - Bouton 'Plus 1': permet d'insérer le bouton "Suivre" qui permet aux Visiteurs de signaler sur Google Search les contenus qu'ils apprécient et de les partager sur Google+.

§Google Plus - Badge: permet d'insérer un badge qui permet aux Visiteurs de découvrir le profil d'une personne sur Google+ et, s'il le souhaitent, de le suivre.

§Google Plus - Icône: permet d'insérer un bouton qui permet aux Visiteurs de découvrir le profil d'une personne sur Google+ et, s'il le souhaitent, de le suivre.

Pour plus d'informations sur le fonctionnement du plug-in Social de Google+, voir: https://developers.google.com/+/plugins/

§Twitter - Bouton 'Tweet': permet d'insérer le bouton "Tweet" qui permet aux Visiteurs de partager le Site avec toutes les personnes qui les suivent sur Twitter.

§Twitter - Cadre du Compte: permet d'insérer un cadre qui permet aux Visiteurs de lire les derniers tweet (messages) publiés sur un Compte Twitter et, s'il le souhaitent, de participer à la discussion.

§Twitter - Bouton 'Suivre': permet d'insérer le bouton "Suivre" qui permet aux Visiteurs de commencer à suivre un Compte Twitter.

Pour plus d'informations sur le fonctionnement du plug-in Social de Twitter, voir: https://dev.twitter.com/docs/twitter-for-websites

§Pinterest - Bouton 'S'abonner': permet d'insérer le bouton "Suivre" qui permet aux Visiteurs de commencer à suivre un Compte Pinterest.

§Pinterest - Bouton 'Épingler': permet d'insérer le bouton "Épingler" qui permet aux Visiteurs de partager les contenus qu'ils apprécient sur Pinterest.

Pour plus d'informations sur le fonctionnement du plug-in Social de Pinterest, voir: http://pinterest.com/about/goodies/
Cliquez pour etendre/reduire Référence: les paramètres utilisables

Naturellement, pour chaque élément sélectionné à partir de la liste Réseau Social sont disponibles des Paramètres spécifiques, qui permettent d'en définir l'aspect et le fonctionnement. En dehors des options graphiques, les paramètres sur lesquels il faut faire particulière attention sont:

AddThis - Boutons 'Partager'

§Nom d'utilisateur: c'est l'identifiant que vous obtenez en ouvrant un Compte AddThis. Si en tant qu'Administrateur du Site vous disposez d'un Compte AddThis, il est avantageux de le spécifier pour avoir la possibilité de consulter quelques statistiques sur l'utilisation du service de la part des Visiteurs.

Facebook - Cadre des Commentaires

§URL du site Web: permet de spécifier l'URL du Site Web que les Visiteurs doivent commenter. En général, le "Cadre des Commentaires" est inséré directement dans la Page du Site qui doit être commentée par les Visiteurs: dans ce cas l'URL à indiquer correspond à celle de la Page qui contient le "Cadre des Commentaires".

Facebook - Cadre 'J’aime'

§URL du Profil: permet de spécifier l'URL de la Page Facebook que vous souhaitez lier pour reprendre les contenus et demander aux Visiteurs de la suivre en cliquant le bouton "J'aime".

Facebook - Bouton 'J'aime'

§URL du site Web: permet de spécifier l'URL du Site Web où les Visiteurs peuvent exprimer leur appréciation en cliquant sur le bouton "J'aime".

Google Plus - Bouton 'Plus 1'

§URL du site Web: permet de spécifier l'URL du Site Web que les Visiteurs peuvent conseiller à leur cercles de contacts.

Google Plus - Badge / Google Plus - Icône

§URL du Profil: permet de spécifier l'URL du Profil Google+ que vous souhaitez lier afin de permettre aux Visiteurs d'entrer dans votre entourage.

Twitter - Bouton 'Tweet'

§URL du site Web: permet de spécifier l'URL du Site Web que les Visiteurs peuvent publier sur leur Profil Twitter.

Twitter - Cadre du Compte / Twitter - Bouton 'Suivre'

§Nom d'utilisateur: c'est l'identifiant que vous recevez en activant un Profil Twitter.

Pinterest - Bouton 'S'abonner'

§Nom d'utilisateur: c'est l'identifiant que vous recevez en activant un Profil Pinterest.

Pinterest - Bouton 'Épingler'

§URL du site Web: permet de spécifier l'URL du Site Web où sont publiées les images que les Visiteurs peuvent "Épingler" sur leurs vitrine de Pinterest.

§URL de l'Image: permet de spécifier l'URL de l'image que les Visiteurs peuvent "Épingler" sur leur vitrine de Pinterest.

Remarques sur la compatibilité avec les versions précédentes:

Dans la version 9 précédente cet Objet était disponible comme Widgets de l'Objet HTML et Widgets.


Objet Livre d'or

Étape 3 - Création de la page >

Objet Livre d'or

 Return to chapter overview
Montrer/Cacher le texte caché

Le Livre d'or, littéralement le "livre des invités" est un utilitaire qui permet aux visiteurs d'un site web de laisser des signatures et des commentaires et / ou exprimer un vote. Il se compose d'un petit formulaire que les visiteurs doivent remplir et une liste de commentaires qui ont déjà été déposés par d'autres.

WebSite X5 permet non seulement de personnaliser le Livre d'Or mais aussi de gérer la publication des commentaires à travers un Panneau de Contrôle en ligne spécifique.

Cliquez pour etendre/reduire Référence: Les paramètres pour le Livre d'or

Pour procéder à la création d'un Livre d'or, vous devez définir le Type de contenu que les visiteurs du site pourront inscrire, en choisissant entre:

Commenter et voter: les Visiteurs peuvent laisser des commentaires et, en plus, exprimer un vote.

Commentaire: les Visiteurs peuvent laisser des commentaires mais ne peuvent pas voter.

Voter: les Visiteurs peuvent voter mais ne peuvent pas laisser de commentaires.

Selon le Type de contenu sélectionné il est possible définir certaines options relatives à la Gestion des commentaires:

§Mode d'affichage: définit si les commentaires laissés par les visiteurs peuvent être consultés en ligne immédiatement, ou si ils doivent d'abord être approuvées à l'aide des commandes du Panneau de contrôle en ligne.

§Ordre d'affichage: définit dans quel ordre chronologique doivent être affichés les commentaires publiés, du plus récent au plus ancien ou vice versa.

§Afficher le bouton 'Abus': permet de mettre à disposition des visiteurs le bouton "Abus" à travers laquel ils peuvent signaler tout comportement incorrect.

§Activer le contrôle anti-spam 'Captcha': ajoute le contrôle anti-spam du Captcha au terme du formulaire pour insérer un commentaire. A cet effet, il est insérée une image avec quelques lettres affichées d'une façon déformées sur un arrière-plan confus: le Visiteur doit recopier correctement les lettres dans un Champ spécifique afin de pouvoir envoyer le commentaire.

§Mode de vote: définit le style de l'élément graphique (par exemple, une série de 5 étoiles) proposé aux visiteurs pour leur permettre de voter. Il s'agit de la seule option disponible si vous sélectionnez Voter comme Type de contenu.

Pour chaque Type de contenu il est possible agir sur les Propriétés suivantes:

§Hauteur: permet de définir la valeur en pixel de la hauteur de l'Objet Livre d'or. Chaque fois qu'un visiteur laisse un commentaire et que celui-ci est publié en ligne, il est ajouté à la liste de ceux déjà présents: en fixant la hauteur de l'Objet, au-delà d'un certain point, la liste des commentaires peut défiler à l'aide d'une barre de défilement, contenant la longueur totale de la page.
Cliquez pour etendre/reduire Référence: les méthodes d'envoi des données du Livre d'or

Dans la section Mode d'enregistrement des données il est possible de spécifier comment les données recupérées au moyen du formulaire à remplir pour publier un commentaire doivent être enregistrées et envoyées au gérant du site:

§Répertoire du serveur où enregistrer les données: spécifie dans quel sous-dossier, ou dans le dossier sur le serveur avec accès en écriture via PHP, les données doivent être sauvegardées. Le dossier sur le serveur principal est déjà spécifié par l'option Dossier du serveur avec l'accès en écriture présente dans la fenêtre Gestion des données. Si vous ne spécifiez pas de sous-dossier, les données sont directement enregistrées dans le dossier sur le serveur principal.

§Envoyer un e-mail pour notifier que le commentaire a été reçu: cette option permet d'envoyer automatiquement une notification par e-mail lorsque de nouvelles données sont reçues.

§Destination adresse e-mail: spécifie l'adresse à laquelle envoyer la notification par e-mail de la réception des données.

Habituellement les fournisseurs d'accès Internet permettent l'accès en écriture pour chaque dossier du serveur: dans ce cas, il n'est pas nécessaire de renseigner un chemin pour le dossier public. Au contraire, pour connaître le chemin complet du dossier public, il est nécessaire de contacter son fournisseur d'accès Internet.

À travers la section WebSite Test du Panneau de Contrôle en ligne il est possible de vérifier si le dossier avec accès en écriture spécifié, et si les éventuels sous dossiers contenus, existent et, dans ce cas, s'ils permettent réellement l'écriture des données.

Pour le bon fonctionnement de l'Objet Livre d'or il est nécessaire faire en sorte que la Page qui le contient soit enregistrée comme un fichier .PHP.

Pour définir l'extension de la Page vous devez utiliser l'option Extension du fichier créé présente dans la fenêtre Propriétés de page | Avancées.

Remarques sur la compatibilité avec les versions précédentes:

Dans la version 9 précédente cet Objet était disponible comme Widgets de l'Objet HTML et Widgets.

Bonnes pratiques:

-

Comment gérer les commentaires du Blog et Livre d'Or à partir du Panneau de contrôle en ligne

Approfondissements:

-

Panneau de contrôle en ligne


Objet Carte

Étape 3 - Création de la page >

Objet Carte

 Return to chapter overview
Montrer/Cacher le texte caché

Dans les Sites Web liés à l'activité commerciale on trouve habituellement une page de Contact sur laquelle s'affiche une carte interactive qui indique l'emplacement physique de l'activité. Ces cartes sont très utiles car non seulement elle communiquent l'adresse mais elles expliquent aussi aux clients potentiels comment atteindre le lieu.

WebSite X5 permet d'insérer une Carte, créée en utilisant le service de Google Maps™, à l'aide de la commande Objet Carte.

Cliquez pour etendre/reduire Référence: les paramètres pour créer une Carte Interactive

Les Paramètres à définir pour mettre en place une Carte interactive sont:

§Adresse: c'est l'adresse à afficher sur la carte.

§Affichage: indique la façon dont la carte doit être affichée, en choisissant Plan, Satellite ou Terrain.

§Langue: spécifie la langue dans laquelle vous souhaitez afficher la carte.

§Taille: spécifie la taille que doit avoir la carte. En laissant active l'option Conserver la proportion, dans la définition de la taille la proportion entre la largeur et la hauteur est maintenue inchangée.

Remarques sur la compatibilité avec les versions précédentes:

Dans la version 9 précédente cet Objet était disponible comme Widgets de l'Objet HTML et Widgets.


Objet Animation Flash

Étape 3 - Création de la page >

Objet Animation Flash

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 permet d'insérer dans les pages différents types d'animations et d'effets pour les rendre plus aatrayantes et spectaculaires.

Vous pouvez importer n'importe quelle animation Flash (format SWF): de la bannière avec textes et images, aux vidéos plus complexes et interactives, enregistrées sur l'ordinateur local ou déjà publiées sur Internet.Grâce aux fonctions avancées disponibles, vous pouvez joindre les éventuels fichiers nécessaires pour reproduire correctement l'animation.

Les commandes nécessaires pour procéder à la création d'un Objet Animation Flash sont organisées dans les sections suivantes: Générales et Avancées.

Cliquez pour etendre/reduire Référence: les commandes de la Section Générales

Les commandes de la section Générales de la fenêtre Objet Animation Flash permettent de choisir le fichier à utiliser pour composer l'Objet Animation Flash.

L'animation Flash peut être insérée en important soit un fichier présent sur l'ordinateur soit un fichier déjà publié sur Internet. Dans le premier cas, sélectionnez l'option Fichier local sur l'ordinateur , cliquez sur le bouton [image] pour parcourir les ressources disponibles et choisissez le fichier au format SWF. Dans le second cas, sélectionnez l'option Fichier Internet et tapez dans le champ approprié l'adresse à laquelle la ressource est déjà disponible en ligne.

Sélectionnez l'option Aperçu pour afficher l'animation importée dans la fenêtre appropriée, en activant l'option Aperçu.

Pour afficher l'aperçu de l'animation, vous devez installer le Player de Macromedia Flash®, disponible à la page http://get.adobe.com/fr/flashplayer/otherversions/ (choisir l'option "Autres Navigateurs").

Pour l'animation insérée, les Propriétés suivantes sont disponibles :

§Texte alternatif: permet d'insérer le texte qui remplace l'animation Flash quand celle-ci ne peut pas être affichée.

§Taille: permet d'indiquer les dimensions en pixels de la largeur de l'animation Flash. L'expression entre parenthèses indique la valeur maximum admise pour la largeur de l'objet: cette valeur est déterminée par la Grille de mise en page définie. En laissant active l'option Conserver la proportion, dans la définition de la taille la proportion entre la largeur et la hauteur est maintenue inchangée.

§Version du lecteur: permet d'indiquer la version du Player Flash requise pour afficher l'animation insérée. Si l'utilisateur ne possède pas la version du Player Flash indiquée, le programme affiche automatiquement une fenêtre de demande de mise à jour.

§Arrière-plan transparent: si cette option est activée, elle permet de rendre transparent l'arrière-plan de l'animation.
Cliquez pour etendre/reduire Référence: les commandes de la Section Avancées

À l'aide des commandes de cette section vous procédez à l'importation, si nécessaire, des fichiers associés à l'animation Flash indispensables pour son bon fonctionnement.

Tous les fichier liés à l'animation Flash importés sont affichés dans un tableau récapitulatif où, autre que le nom du fichier, est indiqué aussi le Chemin d'accès au serveur.

Pour composer la liste des fichier liés à l'animation Flash vous devez utiliser les commandes suivantes:

§Ajouter...: appelle la fenêtre Télécharger le fichier associé pour insérer un nouveau fichier lié à l'animation Flash.

§Modifier...: appelle la fenêtre Télécharger le fichier associé pour modifier les paramètres définis pour le fichier sélectionné dans le tableau récapitulatif des fichier liés.

§Supprimer: permet de supprimer le fichier sélectionné parmi ceux présents dans le tableau récapitulatif des fichiers liés.

Enfin, est disponible l'option:

§Nom du chemin d'accès pour télécharger le fichier Flash : indique le parcours relatif du répertoire où doit être publié le fichier .SWF relatif à l'animation Flash.


Objet Liste des produits

Étape 3 - Création de la page >

Objet Liste des produits

 Return to chapter overview
Montrer/Cacher le texte caché

Une des fonctions les plus intéressantes de WebSite X5 est la création et la gestion de sites E-commerce permettant non seulement de présenter vos produits sur une vitrine visible dans le monde entier mais aussi de les vendre directement en ligne.

WebSite X5 permet non seulement de proposer des produits et de gérer un panier e-commerce mais aussi de préparer un catalogue en ligne à l'aide de l'objet nommé Liste de produits. Cet objet permet de présenter un groupe de produits, sélectionnés parmi ceux déjà insérés dans le Panier virtuel e-commerce, à travers des fiches produit résumant les informations principales et permettant de les vendre.

Les commandes disponibles pour créer une objet Liste de produits sont organisées dans les sections suivantes: Liste et Paramètres.

Cliquez pour etendre/reduire Référence: les commandes de la Section Liste

Dans cette section vous pouvez indiquer les produits devant figurer dans la Objet Liste des produits.

La colonne de gauche de la fenêtre présente la Catégorie et liste des produits insérées pendant la création du Panier virtuel e-commerce disponible à l'étape 4 - Paramètres avancés.

En regard de chaque catégorie et chaque produit, se trouve une case à cocher: cliquez sur la case correspondant aux catégories et/ou produits que vous voulez insérer dans la Objet Liste des produits que vous êtes en train de composer. Tous les produits sélectionnés sont automatiquement affichés dans la colonne de droite de la fenêtre.

Sélectionner une catégorie ou tous les produits appartenant à une catégorie, ce n'est pas la même chose: dans le premier cas seulement, si vous ajoutez par la suite de nouveaux produits à une catégorie, ils seront automatiquement insérés dans les Objets Liste de produits à laquelle ils sont associés.

Les Produits insérés dans la colonne de droite de la fenêtre peuvent être rangés en cliquant sur le bouton Ordre de tri et sélectionnant le type de tri que l'on veut appliquer: Personnalisé, Prénom, Catégorie, Prix, Croissant ou Décroissant.

En sélectionnant le tri Personnalisé il est possible d'utiliser les boutons En haut / En bas pour définir manuellement l'ordre des Produits.

Cliquez pour etendre/reduire Référence: les commandes de la Section Paramètres

À l'aide des options de cette section vous pouvez définir certains paramètres graphiques relatifs aux fiches présentant les produits figurant dans la liste.

Vous devez tout d'abord indiquer le Mode d'affichage en choisissant parmi les types suivants de fiches produit:

Seulement texte

Les informations suivantes figurent une après l'autre sur la fiche produit: Nom du produit, description, liste déroulante avec les variantes (si elles sont disponibles), coût et champ pour la quantité avec le bouton "Acheter".

Image et texte

Dans la fiche produit, l'image du produit apparaît à gauche tandis que les informations relatives sont affichées à droite.

Texte et image

Dans la fiche, les informations relatives au produit apparaissent à gauche tandis que l'image du produit est affichée à droite.

Seulement image

Dans ce cas, toutes les informations associées, sauf la description étendue, apparaissent sous l'image.

Alterner Image et texte

Dans ce cas le programme alterne les fiches produit avec l'image et le texte à droite des fiches produit avec l'image et le texte à gauche.

Les fonctions du cadre Paramètres des cadres permettent de définir:

§Fiches par ligne: permet d'indiquer combien de fiches doivent être placées côte à côte sur une seule ligne.

§Hauteur des fiches: permet d'indiquer la valeur en pixels correspondant à la hauteur de chaque fiche produit. En fonction de ce paramètre, les images associées aux produits sont redimensionnées automatiquement. Si les textes de description des produits sont trop longs pour être affichés entièrement, la barre de défilement apparaît automatiquement.

§Largeur Image (%): permet d'indiquer, si vous avez choisi ce type de présentation où le texte et l'image sont côte à côte, combien d'espace sur la fiche doit être occupé par l'image et combien par le texte. Si l'image occupe 30% de la largeur de la fiche, le texte en occupera 70%.

§Marge intérieure: la marge correspond à l'espace entre la bordure de la fiche produit et son contenu. Cette option permet de définir l'espace entourant le contenu par rapport à la bordure de la fiche produit.

À travers les fonctions du cadre Graphiques il est ensuite possible de définir:

§Couleur de texte/Couleur d'arrière-plan: définit la couleur du texte et de l'arrière-plan des fiches produits.

§Police: spécifie le type de Police, le Style et la taille du texte.

Les fonctions du cadre Options permettent de définir:

§Epaisseur: spécifie l'épaisseur des bords, du bloc menu.

§Couleur: spécifie la couleur des bords, du bloc menu.

§Coins arrondis: définit le facteur d'arrondissement des angles, du bloc menu.

§Ombre: applique une ombre, définissant la couleur, la position, la diffusion et la taille.

Les fonctions du cadre Options permettent de définir:

§Afficher le prix: si vous sélectionnez cette option, la fiche produit contiendra aussi le prix du produit, avec ou sans TVA.

§Afficher le champ quantité: si vous sélectionnez cette option, la fiche produit contiendra le champ Quantité pour indiquer la quantité de produit à insérer dans le panier.

§Activer le Lien sur l'image: si vous sélectionnez cette option, le lien vers les images agrandies est automatiquement défini sur les différentes images des fiches du produit. Ces images agrandies sont affichées dans la fenêtre ShowBox.

L'aspect de la fenêtre Showbox peut être complètement personnalisé: avec les options dans la section Styles et modèles | E-mail de l'étape 4 - Paramètres avancés. Il est, par exemple, possible de définir les couleurs, l'ombre, l'opacité et les effets d'ouverture.

Pour que la Objet liste des produits fonctionne correctement, vous devez avoir au préalable entré les Produits dans le panier e-commerce via les commandes de la section Panier virtuel e-commerce de l'étape 4 - Paramètres avancés.


Objet HTML et Widgets

Étape 3 - Création de la page >

Objet HTML et Widgets

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 propose un objet spécifique pour chaque type de contenu à insérer dans une page: texte, image, animation, formulaire e-mail, etc. Grâce à la possibilité de gérer aussi l'Objet HTML et Widgets, les choix deviennent virtuellement illimités. La fonction objet HTML et Widgets permet d'insérer directement des portions de code et donc d'exécuter des fonctions particulières non prévues.

Les Widgets disponibles sont particulièrement utiles: il s'agit d'applications déjà prêtes permettant d'exécuter une tâche particulière. L'exemple le plus simple est celui du Widget pour Google News™: en définissant quelques paramètres, il permet de créer et d'insérer un box avec les actualités mises à jour en temps réel.

Les commandes disponibles pour créer un Objet HTML et Widgets sont organisées dans les sections suivantes: Code HTML et Avancées.

Cliquez pour etendre/reduire Référence: les commandes de la Section Code HTML

Les commandes de la section Code HTML de la fenêtre Objet HTML et Widgets proposent un éditeur permettant de composer le code HTML à introduire dans la page, en le tapant manuellement ou en double-cliquant sur l'un des Widgets disponibles.

L'éditeur disponible dans le cadre Code HTML propose les commandes suivantes:

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Elle permettent, respectivement, de couper, copier et coller la portion de code sélectionné.

Annuler [CTRL+Z] - Restaurer [ALT+MAJUSC+BACKSPACE]

Elle permettent, respectivement, d'annuler et de rétablir la dernière opération exécutée/annulée.

Pour faciliter l'écriture/lecture du code, l'éditeur HTML est pourvu de la commande Mise en évidence de la syntaxe (Coloration Syntaxique). Cette fonction utilise différentes couleurs pour mettre en évidence certains éléments du code sans modifier le sens du texte. Grâce à la mise en évidence, la structure du code devient claire et, par conséquent, on trouve plus facilement les erreurs éventuelles.

Le cadre Liste Widget propose en revanche la liste de tous les Widgets disponibles. Si vous double-cliquez sur le Widget voulu, vous affichez la fenêtre Widget permettant de définir les paramètres prévus. Si vous confirmez, le code HTML relatif au Widget est composé et automatiquement inséré dans l'éditeur.

Remarques sur la compatibilité avec les versions précédentes:

Objets disponibles - Alors que dans la version 9 précédente le Livre d'or, les boutons des Réseaux Sociaux et le Plan était disponibles comme Widget, dans la version 10 ce sont des objets réels (voir, étape 3 - Création de la page).

Enfin, dans le cadre Propriétés sont disponible les options suivantes:

§Largeur: permet d'afficher la largeur de l'Objet HTML et Widgets; cette valeur est automatiquement définie selon l'espace disponible dans la Grille de mise en page.

§Hauteur: permet de définir la hauteur de l'Objet HTML et Widgets.

§Barres de défilement: activée par défaut, elle affiche automatiquement la barre de défilement si l'Objet HTML et Widgets a une hauteur supérieure à celle définie avec l'option Hauteur.
Cliquez pour etendre/reduire Référence: les commandes de la Section Avancées

Les commandes de cette section permettent de créer une feuille de style (CSS) et/ou de définir la liste des fichiers à joindre à l'Objet HTML et Widgets sur lequel vous êtes en train de travailler.

Le cadre Code CSS propose un éditeur (analogue à celui présent dans la section Code HTML) permettant d'entrer les instructions pour composer la feuille de style. Nous vous rappelons que le but de ces CSS est de définir l'aspect graphique des pages HTML auxquelles ils sont associés.

Le cadre Fichiers associés à code HTML montre tous les fichiers associés dans un tableau récapitulatif indiquant le nom du fichier et le Chemin d'accès au serveur.

Pour composer la liste des fichiers associés au Code HTML, utilisez les commandes suivantes:

§Ajouter...: permet, dans la fenêtre Télécharger le fichier associé, d'insérer un nouveau fichier avec lien.

§Modifier...: permet de rappeler la fenêtre Télécharger le fichier associé pour modifier les prédispositions définies pour le fichier sélectionné dans le tableau récapitulatif des fichiers associés.

§Supprimer: permet de supprimer le fichier sélectionné parmi ceux présents dans le tableau récapitulatif des fichiers associés.


Editeur d'image

Étape 3 - Création de la page > Fonctions communes >

Editeur d'image

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 offre une procédure automatique pour optimiser les images importées ainsi qu'un éditeur graphique intégré polyvalent permettant d'exécuter des opérations de retouches photos.

Pour rappeler l'Editeur d'image, cliquez sur le bouton Modifier... disponible, en général, dans les fenêtres permettant d'importer un fichier graphique. Par exemple, celles relatives à l'Objet Image, l'Objet de la galerie, la création d'un nouveau produit dans le Panier virtuel e-commerce.

L'Editeur d'image est organisé dans les sections suivantes: Rogner et pivoter, Filtres, Filigrane, Masque, Cadre, Effets et Bibliothèque.

L'Editeur d'image propose les boutons suivants:

§Ok: permet de quitter l'Editeur d'image et revenir à la fenêtre principale tout en enregistrant les modifications effectuées sur l'image.

§Annuler: permet de quitter l'Editeur d'image et revenir à la fenêtre principale sans enregistrer les modifications effectuées sur l'image.

§Enregistrer...: permet d'enregistrer une copie de l'image originale au format .PNG

Cliquez pour etendre/reduire Référence: les commandes de la Section Rogner et pivoter

Les commandes de cette section permettent de couper la zone de l'image à afficher et d'éliminer le reste.

Vous pouvez dessiner la zone de coupe directement sur l'aperçu de l'image et utiliser les poignées de sélection pour la modifier. Vous pouvez déplacer la sélection de la coupe pour mettre en premier plan la zone voulue: pour ce faire, cliquez sur celle-ci à l'aide du bouton gauche de la souris et positionnez-la à l'endroit voulu.

Il n'est pas nécessaire de confirmer la coupe: la portion externe à la sélection de la coupe (plus foncée que l'original) ne sera pas considérée. Pour annuler la coupe, cliquez sur l'image en dehors de la zone sélectionnée.

Sur les côtés de l'image, vous disposerez des boîtes suivantes:

§Rogner: indique les valeurs en pixels de la Coordonnée X et de la Coordonnée y qui identifient l'angle supérieur gauche de la zone sélectionnée par la coupe, en plus de sa Largeur et Hauteur. Les valeurs des paramètres peuvent être prises directement selon la zone de coupe dessinée, tapées dans les champs appropriés ou définies à l'aide des curseurs.

§Reflet: permet de réfléchir l'image dans le sens horizontal (selon l'axe vertical) et/ou vertical (selon l'axe horizontal).

§Rotation: permet de tourner l'image dans le sens des aiguilles d'une montre de 0°, 90°, 180° ou 270°.
Cliquez pour etendre/reduire Référence: les commandes de la Section Filtres

Les commandes de la section Filtres de l'Editeur graphique permettent de corriger les principaux réglages de couleur et de définir certains effets graphiques sur l'image importée.

Pour définir un filtre il faut le sélectionner dans la liste, l'activer et définir les paramètres. Les modifications relatives aux filtres définis sont immédiatement appliquées et affichées dans l'aperçu de l'image.

§Filtres: indique la liste des filtres pouvant être appliqués à l'image. La liste comprend: Luminosité/Contraste, Equilibrage (RVB), Intensité (TSL), Détail, Flou, Noir et blanc, Sépia, Mosaïque, Portrait, Diffusion, Peinture à l'huile, Zone de dessin, Bruit, Marbre. Pour appliquer un filtre, il suffit de le cocher.

§Paramètres: indique les paramètres sur lesquels vous pouvez agir pour définir le filtre sélectionné.
Cliquez pour etendre/reduire Référence: les commandes de la Section Filigrane

Les commandes de la section Filigrane de l'Editeur graphique permettent d'appliquer un filigrane à l'image importée pour la protéger contre les copies non autorisées. Le but du filigrane est, en effet, d'altérer l'image, en indiquant par exemple explicitement le copyright, pour décourager la copie et l'utilisation.

§Filigrane: fournit la liste des filigranes pouvant être appliqués à l'image. En plus des images de filigrane disponibles, vous pouvez appliquer un filigrane personnel: pour cela, il suffit de sélectionner le deuxième aperçu de la liste (Personnalisé...) et d'importer le fichier graphique préparé.

§Paramètres: permet de tourner de 90°, 180° ou 270° ou de réfléchir horizontalement ou verticalement le filigrane appliqué à l'Image.

Il faut préparer le filigrane comme un fichier graphique au format .GIF, .PNG, .PSD ou .WMF et définir sa transparence: le filigrane est superposé à l'image originale pour afficher seulement les parties correspondant aux zones transparentes.

Comme le format .GIF ne gère qu'un niveau de transparence, tandis que les formats .PNG et .PSD en gèrent 256, il est conseillé d'enregistrer les filigranes dans l'un de ces formats.

+

=

Cliquez pour etendre/reduire Référence: les commandes de la Section Masque

Les commandes de la section Masque de l'Editeur graphique permettent d'appliquer un masque à l'image importée pour modifier sa forme.

§Masque: contient la liste des masques pouvant être appliqués à l'image. En plus des masque proposés, vous pouvez appliquer un masque personnel: pour cela, il suffit de sélectionner le deuxième aperçu de la liste (Personnalisé...) et d'importer le fichier graphique préparé.

§Paramètres: permet de tourner de 90°, 180° ou 270°, ou de réfléchir horizontalement ou verticalement le masque appliqué à l'image.

Le masque est une image à 256 couleurs en niveaux de gris: le masque est appliqué à l'image originale de sorte que les parties couvertes par le noir soient invisibles et celles couvertes par le blanc restent visibles.

+

=

Cliquez pour etendre/reduire Référence: les commandes de la Section Cadre

Les commandes de la section Cadre de l'Editeur graphique permettent d'appliquer un cadre à l'image importée.

§Cadre: contient la liste des cadres pouvant être appliqués à l'image importée. En plus des cadres proposés, vous pouvez appliquer un cadre personnel: pour cela, il suffit de sélectionner le deuxième aperçu de la liste (Personnalisé...) et d'importer le fichier graphique préparé.

§Paramètres: permet de tourner de 90°, 180° ou 270° ou de réfléchir horizontalement ou verticalement le cadre appliqué à l'image.

Il faut préparer le cadre comme un fichier graphique au format .GIF, .PNG, .PSD ou WMF et définir sa transparence: le cadre est superposé à l'image originale pour afficher seulement les parties correspondant aux zones transparentes.

Comme le format .GIF ne gère qu'un niveau de transparence, tandis que les formats .PNG et .PSD en gèrent 256, il est conseillé d'enregistrer les cadres dans l'un de ces formats.

+

=

Cliquez pour etendre/reduire Référence: les commandes de la Section Effets

Les commandes de la section Effets de l'Editeur graphique permettent de définir certains effets graphiques sur l'image importée.

§Effets: montre la liste des effets pouvant être appliqués à l'image. La liste comprend: Ombre, Reflet, Lueur externe, Bordure Colorée, Bordure nuancée, Bombé, Ligne en relief, Cadre, Rotation, Perspective, Distorsion et Opacité. Pour appliquer un effet, cochez la case de l'effet voulu.

§Paramètres: rétablit les paramètres permettant de définir l'effet sélectionné.
Cliquez pour etendre/reduire Référence: les commandes de la Section Bibliothèque

Dans cette section vous pouvez choisir un kit de paramètres, enregistrés comme Style, et l'appliquer à l'image courante ou bien enregistrer les prédispositions définies pour l'image courante dans un nouveau Style que vous pourrez rappeler et appliquer à d'autres images.

§Appliquer: permet d'appliquer à l'image courante tous les paramètres prévus pour le style sélectionné.

§Ajouter: permet d'enregistrer toutes les prédispositions définies dans les sections précédentes de l'Editeur d'image pour l'image courante dans un Style, et de l'ajouter à la liste des Styles Personnalisé.

§Supprimer: permet de supprimer le style sélectionné dans la liste Styles Personnalisé. Vous ne pouvez pas supprimer les Styles Présélections.


Style de cellule

Étape 3 - Création de la page > Fonctions communes >

Style de cellule

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 permet de créer chaque page d'un site à l'aide d'une Grille de mise en page qui partage l'espace disponible en cellules. Le nombre de cellules disponibles dépend du nombre de lignes et de colonnes insérées et, pour chaque cellule, vous pouvez insérer un contenu différent (à l'aide du Glisser & Déplacer des objets disponibles).

La cellule équivaut donc à un espace déterminé de la page: elle a un contenu et elle peut avoir un aspect graphique particulier. À l'aide des marges, des bords et de l'arrière-plan de la cellule vous pouvez créer des boîtes à l'intérieur de la page pour organiser les contenus et mettre certains contenus en premier plan.

Pour définir l'aspect graphique d'une Cellule il suffit de la sélectionner et cliquer sur le bouton [image] pour rappeler la fenêtre Style de cellule, dont les options sont organisées dans les sections suivantes. Style, Textes et Bibliothèque.

Cliquez pour etendre/reduire Référence: les commandes de la Section Style

Les commandes de cette section permettent de définir les paramètres graphiques de la cellule courante de la Grille de mise en page.

Tout d'abord, il faut définir le type d'Arrière-plan souhaité pour la cellule, en choisissant entre:

Arrière-plan coloré: l'arrière-plan de la cellule est coloré en teinte unie.

Arrière-plan dégradé: l'arrière-plan de la cellule est rempli par un gradient dont vous pouvez définir les couleurs de départ et de fin ainsi que la direction du dégradé.

Arrière-plan image: l'arrière plan de la cellule est créé en important une image.

Ajuster à la cellule: l'arrière plan de la cellule est créé en important une image qui est coupée en blocs et recomposée pour l'adapter parfaitement aux dimensions de la cellule. (voir, Comment travailler sur l'aspect de la Cellule).

Selon le type d'arrière-plan, vous pouvez agir sur différentes options du cadre Paramètres.

 | Arrière-plan coloré | Arrière-plan dégradé | Arrière-plan image | Ajuster à la cellule
§Couleur d'arrière-plan: permet de définir la couleur à utiliser pour remplir l'arrière-plan de la cellule. | P | - | P | P
§Couleur initiale / Couleur finale: permettent d'indiquer les couleurs de départ et de fin à utiliser pour composer le dégradé. | - | P | - | -
§Diffusion: permet d'établir si la première ou la dernière couleur doit être prédominante dans le dégradé, en définissant l'espace (en pixels) à l'intérieur duquel doit avoir lieu la transition du premier au second. Par exemple, dans un dégradé vertical où l'on passe du gris au blanc avec une diffusion à 250, le gradient est composé dans les premiers 250 px, après quoi l'arrière-plan restera uniformément blanc. | - | P | - | -
§Sens: permet de choisir le type de nuance à appliquer, à savoir à partir d'en Haut, d'en Bas, de la Gauche ou de la Droite. | - | P | - | -
§Fichier image: sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan. | - | - | P | P
§Disposition: permet d'indiquer si l'image insérée comme arrière-plan doit être répétée ou non. L'image peut être répétée horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. En plus, il est possible de faire en sorte que l'image soit adaptée, autrement redimensionnée de façon à couvrir tout l'arrière-plan. | - | - | P | -
§Alignement: permet de définir l'alignement de l'image utilisée comme arrière-plan par rapport à la zone occupée par la cellule. | - | - | P | -
§Variante de couleur : permet d'indiquer la couleur vers laquelle tendra l'image insérée comme arrière-plan de la cellule. Vous appliquez donc un effet "Colorisé" à l'image de sorte qu'elle tende vers la couleur voulue. | - | - | P | -
§Largeur bloc / Hauteur bloc : permettent de définir les dimensions des blocs formant l'image d'arrière-plan de sorte à déterminer quelles portions de l'Image doivent rester inaltérées et quelles portions doivent être répétées. (voir Comment travailler sur l'aspect de la Cellule). | - | - | - | P
§Opacité: permet de définir le degré d'opacité de la couleur/du dégradé/de l'image d'arrière-plan à appliquer. Plus les valeurs se rapprochent du 0, plus l'opacité diminue et l'arrière-plan de la cellule devient transparent en laissant voir l'arrière-plan de la page. | P | P | P | P

Les options du cadre Bordure permettent de définir:

§Epaisseur: spécifie l'épaisseur des bords, du bloc menu.

§Couleur: spécifie la couleur des bords, du bloc menu.

§Coins arrondis: définit le facteur d'arrondissement des angles, du bloc menu.

§Ombre: applique une ombre, définissant la couleur, la position, la diffusion et la taille.

Enfin, les options du cadre Alignement et Marge permettent de définir:

§Alignement: permet d'aligner en Haut/Centre/Bas et à Gauche/Centre/Droite l'Objet contenu par rapport à la cellule courante.

§Marge extérieure / Marge intérieure: permettent de définir la valeur en pixel des marges externes et internes de la cellule courante (voir, Le Box Model dans WebSite X5).

Remarques sur la compatibilité avec les versions précédentes:

Dans les versions précédentes, les options relatives aux Marges de la Cellule et à l'alignement du contenu de la Cellule étaient disponibles à travers des menus rappelés par les boutons [image] et [image] présents dans la Barre d'Outils disponible au-dessus de la Grille de mise en page. Dans la version 10, ces boutons ont été supprimés et les options ont été incluses dans la fenêtre Style de cellule| Style.
Cliquez pour etendre/reduire Référence: les commandes de la Section Textes

Les commandes de cette section permettent d'insérer et définir l'aspect graphique des éléments texte qui complètent le style de la cellule courante Grille de mise en page.

Vous devez tout d'abord définir l'élément, Texte ou Image, que vous voulez insérer et sur lequel vous voulez travailler. Vous pouvez choisir parmi les options suivantes:

Titre: c'est le texte qui est affiché comme titre de la cellule courante.

Image de l'en-tête: c'est une image que vous pouvez insérer dans l'en-tête de la cellule courante, éventuellement en regard du Titre.

Texte de description: c'est le texte qui est affiché comme légende de la cellule courante.

Après l'insertion, les différents éléments peuvent être sélectionnés soit à l'aide de la boîte à liste déroulante soit en cliquant sur l'image d'aperçu.

Selon le type d'élément sélectionné, vous pouvez agir sur différentes options du cadre Paramètres.

Pour les éléments Titre et Texte de description, les options disponibles sont:

§Contenu: permet de taper le titre ou le texte de description de la cellule.

§Couleur d'arrière-plan / Couleur de texte: permet d'indiquer la couleur de l'arrière-plan du texte et du texte sur lequel vous êtes en train de travailler.

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet d'indiquer si le texte doit être aligné à Gauche, au Centre ou à Droite par rapport à la cellule.

§Marge extérieure / Marge intérieure: permettent de définir la valeur en pixels pour les marges du texte, afin de le positionner avec précision en décidant la distance par rapport aux bordures de la cellule.

Pour l'élément Image de l'en-tête, au contraire, les options disponibles sont:

§Fichier image: sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan.

§Alignement: permet d'indiquer si l'image doit être insérée à Gauche, au Centre ou à Droite par rapport à la cellule.

§Marge: permettent de définir la valeur en pixels pour les marges de l'image insérée, afin de la positionner avec précision en décidant la distance par rapport aux bordures de la cellule et, en conséquence. par rapport au Titre éventuellement présent.
Cliquez pour etendre/reduire Référence: les commandes de la Section Bibliothèque

Cette section permet de choisir un ensemble de paramétrages, enregistrés comme Style, et de les appliquer à la cellule courante ou bien d'enregistrer les prédispositions définies pour la cellule courante dans une nouveau Style que vous pourrez rappeler par la suite et appliquer à d'autres cellules.

La bibliothèque présente une liste de tous les Styles Présélections et Personnalisé déjà créés. En plus, vous disposez des commandes suivantes:

§Appliquer: permet d'appliquer à la cellule courante tous les paramétrages prévus pour le style sélectionné.

§Ajouter: permet d'enregistrer tous les paramétrages graphiques définis dans les sections Style et Textes pour la cellule courante dans un style et de l'ajouter à la liste des Styles Personnalisé.

§Supprimer: permet de supprimer le style sélectionné dans la liste Styles Personnalisé. Vous ne pouvez pas supprimer les Styles Présélections.

Lors de la composition d'un style, tous les paramétrages graphiques définis pour la cellule restent inchangés tandis que les contenus peuvent varier d'une cellule à l'autre. Ainsi, par exemple, dans le style vous enregistrez la Couleur de texte ou la Police mais pas le Contenu spécifié pour les éléments comme le Titre et le Texte de description associé à une cellule.

Bonnes pratiques:

-

Comment travailler sur le Style de cellule

Approfondissements:

-

Le Box Model dans WebSite X5


Fenêtre Lien

Étape 3 - Création de la page > Fonctions communes >

Fenêtre Lien

 Return to chapter overview
Montrer/Cacher le texte caché

En plus des menus de navigation fixe, créés automatiquement en fonction du Plan du site, WebSite X5 permet d'insérer sur les Textes et Images les liens nécessaires pour réaliser une série d'opérations différentes: ouvrir des pages internes ou externes, rappeler un fichier, afficher des images, ajouter un produit au panier, etc.

Pour définir un lien, vous pouvez choisir le type d'action mais aussi définir et personnaliser l'info-bulle associée expliquant ce qui se passe en cliquant.

Les différentes options pour définir un lien sont regroupées dans les sections suivantes: Action et Description.

Cliquez pour etendre/reduire Référence: les commandes de la Section Action

Les commandes de cette section permettent d'indiquer le type d'action à associer au lien:

Page du site

Permet d'établir un lien vers une autre page du site. Le bouton [image] permet de parcourir le plan du site et de sélectionner la Page du site à associer. Si nécessaire, il est aussi possible de préciser l'Ancre interne à la page vers laquelle pointer, en la sélectionnant dans la liste des Ancres présentes dans la page. Enfin, Vous pouvez indiquer si la page associée doit être affichée dans la même fenêtre, dans une nouvelle fenêtre du Navigateur ou dans une fenêtre PopUp. Dans ce dernier cas, le programme ouvre comme PopUp une nouvelle fenêtre du navigateur dont vous pouvez définir la taille (Largeur Infobulle et Hauteur).

Les Ancres doivent tout d'abord être associées aux Objets pour qu'elles appairaissent dans la liste proposée par l'option Ancre interne à la page.

Pour associer une Ancre à un Objet il faut utiliser le bouton [image] disponible à l'étape 3 - Création de la page.

Fichier ou URL

Permet d'établir un lien vers une ressource quelconque, un fichier ou une page HTML, présente sur l'ordinateur ou déjà publiée sur le Web. Pour choisir le fichier à associer, sélectionnez l'option Fichier local sur l'ordinateur et cliquez sur le bouton [image] pour parcourir les ressources enregistrées localement, ou sélectionnez l'option Fichier Internet et saisissez l'adresse (URL) qui identifie sa position dans le réseau.

Dans ce cas également, vous pouvez indiquer si la ressource associée doit être affichée dans la même fenêtre, dans une nouvelle fenêtre du Navigateur ou dans une fenêtre Popup dont vous pouvez définir la taille (Largeur Infobulle et Hauteur).

Fichier ou URL avec ShowBox

Permet de définir un lien vers un fichier quelconque, présent sur votre ordinateur ou déjà publié sur le Web, dans une boîte d'affichage appropriée. Contrairement à la fenêtre Popup, dans la Boîte d'affichage le fichier apparaît en premier plan sur la page d'origine qui devient automatiquement plus opaque et claire/foncée.

Pour choisir le fichier à associer, sélectionnez l'option Fichier local sur l'ordinateur et cliquez sur le bouton [image] pour parcourir les ressources enregistrées sur le système, ou sélectionnez l'option Fichier Internet et saisissez l'adresse (URL) qui identifie sa position dans le réseau. Les options disponibles permettent de définir la taille (Largeur Infobulle et Hauteur) de la boîte d'affichage ainsi qu'une Légende qui sera affichée au bas.

Le lien vers la boîte d'affichage est particulièrement indiqué pour visualiser des images, mais vous pouvez aussi l'utiliser pour afficher des ressources différentes comme, par exemple, les documents .PDF.

Galerie ShowBox

Permet de définir un lien pour lancer l'affichage d'une Galerie d'images dans une boîte d'affichage. Pour créer la liste des images, utilisez les commandes disponibles: Ajouter..., Supprimer, En haut et En bas. Par ailleurs, vous pouvez définir la taille (Largeur e Hauteur) de la boîte d'affichage.

L'aspect de la fenêtre Showbox peut être complètement personnalisé: avec les options dans la section Styles et modèles | E-mail de l'étape 4 - Paramètres avancés. Il est, par exemple, possible de définir les couleurs, l'ombre, l'opacité et les effets d'ouverture.

Courriel

Permet d'établir un lien vers le programme Courriel par défaut pour envoyer un e-mail. Pour définir ce type de lien, il suffit de taper l'Adresse e-mail à laquelle le message doit être envoyé.

Si vous sélectionnez l'option Activer la protection du courriel, l'Adresse e-mail spécifiée sera cryptée dans le code HTML de la page: ainsi, elle ne sera pas reconnue par les robots qui sondent le réseau à la recherche d'adresses pour les campagnes de spam.

Appel Internet

Permet de définir un lien qui active un logiciel d'appel téléphonique via Internet (par exemple Skype) pour appeler un autre Utilisateur. L'utilisateur à appeler doit être renseigné dans un champ approprié. Par ailleurs, vous pouvez indiquer le Type d'action en choisissant parmi: Appeler, Ajouter un contact, Chat, Afficher le profil, Messagerie vocale Skype et Envoyer le fichier.

Son

Permet de définir un lien qui lance la reproduction d'un son. Pour choisir le fichier à associer, sélectionnez l'option Fichier local sur l'ordinateur et cliquez sur le bouton [image] pour parcourir les ressources enregistrées sur le système, ou sélectionnez l'option Fichier Internet et saisissez l'adresse (URL) qui identifie sa position dans le réseau. Vous pouvez associer des fichiers au format .MP3.

Quand vous cliquez sur le lien, vous affichez une info-bulle contenant le bouton Play/Pause pour lancer/interrompre la reproduction du son. Quand vous éloignez la souris de l'info-bulle, elle se ferme et la lecture s'interrompt.

L'info-bulle sur le lien avec le son est créée automatiquement par le programme: son aspect est défini par les paramètres définis dans la fenêtre Styles et modèles | Textes de l'étape 4 - Paramètres avancés.

Imprimer la page

Permet d'établir un lien qui lance l'impression de la page affichée.

Message d'alerte

Permet de définir un lien qui affiche un message d'alerte. Pour définir ce type de lien, tapez le Texte du message dans le champ approprié. Si vous sélectionnez l'option Afficher dans une fenêtre contextuelle, le message d'alerte apparaît dans une boîte de dialogue style Windows.

Flux RSS

Permet d'afficher le flux RSS du site: ce lien n'est actif que si vous avez effectivement créé un Feed RSS dans la fenêtre appropriée de l'étape 4 - Paramètres avancés.

Lorsque vous testez le fonctionnement du Site créé localement, une fenêtre d'avertissement prévient que les Flux RSS apparaîtront seulement quand le site Web aura été publié sur Internet.

Blog

Permet de définir un lien ouvrant le Blog associé au site courant. Pour que ce lien fonctionne correctement, vous devez créer précédemment un Blog dans la section appropriée de l'étape 4 - Paramètres avancés.

Les options disponibles permettent d'indiquer si le Blog associé doit être affiché dans la même fenêtre ou dans une nouvelle fenêtre du Navigateur.

Plan du site

Permet de définir un lien affichant le Plan du site complet dans une page appropriée. Les éléments du plan du site, créé automatiquement, sont des liens actifs vers une page: le plan représente donc un outil utile d'orientation et de navigation mis à la disposition de l'utilisateur. L'affichage des éléments du plan peut être géré à l'aide des commandes Tout ouvrir et Tout fermer.

Afficher le panier

Permet de définir un lien qui mène à la page du panier contenant la liste de tous les produits déjà commandés

Ajouter au panier

Permet de définir un lien permettant à l'utilisateur d'accéder au panier e-commerce pour passer la commande ou d'insérer directement un produit indiqué parmi ceux à acheter.

Dans le premier cas, sélectionnez l'option Afficher la lise de Produits de la catégorie sélectionnée et sélectionnez la catégorie voulue dans le schéma reproduisant tout le catalogue des produits.

Dans le second cas, sélectionnez l'option Ajouter le produit sélectionné directement dans le panier et sélectionnez le produit dans la liste appropriée. Par ailleurs, vous pouvez indiquer l'Option et la Quantité du produit qui sera inséré dans le panier. Si vous activez aussi l'option Ajouter le produit sans montrer le Panier le Client ne sera pas automatiquement dirigé vers le Panier.

Pour que les liens Afficher le panier et Ajouter au panier fonctionnent correctement, vous devez précédemment créer le panier e-commerce à l'aide des commandes de la section Panier virtuel e-commerce de l'étape 4 - Paramètres avancés.
Cliquez pour etendre/reduire Référence: les commandes de la Section Description

Les commandes de cette section permettent d'associer une description au Lien. Cette description est utilisée pour composer un commentaire, nommé "info-bulle" ou "Tip". L'info-bulle s'affiche quand vous pointez un lien et elle explique ce qui se passe si vous cliquez sur ce dernier: vous passerez à une page ou à un site différent, vous afficherez une image, vous lancerez le téléchargement d'un fichier, etc.

Les commandes disponibles pour composer une info-bulle sont:

§Texte: permet de définir un texte de description du lien.

§Fichier image: permet de définir une image qui sera affichée dans l'info-bulle et qui remplace ou accompagne la description du lien.

§Largeur Infobulle: permet de définir la largeur en pixels de l'info-bulle.

§Largeur Image (%): permet de définir la largeur de l'image en pourcentage par rapport à la largeur de l'Info-bulle.

§Position de l'image: permet de définir la position de l'image insérée dans l'Info-bulle par rapport au texte.

Comme les paramètres Texte, Fichier image et Largeur Infobulle changent d'un lien à l'autre, il faut les définir au fur et à mesure. Vous pouvez définir d'autres paramètres graphiques, relatifs à l'aspect de l'info-bulle et donc communs à tout le Projet, dans la fenêtre Styles et modèles | Textes de l'étape 4 - Paramètres avancés.


Fenêtre Propriétés de l'effet

Étape 3 - Création de la page > Fonctions communes >

Fenêtre Propriétés de l'effet

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre présente les commandes nécessaires pour définir un effet d'entrée sur les images sélectionnées de l'objet Diaporama, disponible dans l'éditeur pour l'option Modifier le modèle, et sur les images sélectionnées de l'Objet de la galerie et sur les images du Diaporama créé pour présenter un Produit (voir, Objet Liste des produits).

Les commandes disponibles sont organisées dans les sections suivantes: Type d'effet, Zoom et Position et Page.

Cliquez pour etendre/reduire Référence: les commandes de la Section Type d'effet

Cette section permet de choisir le type d'effet en entrée à appliquer aux images sur lesquelles vous êtes en train de travailler:

§Liste des effets: présente la liste de tous les effets disponibles. Si vous sélectionnez la rubrique "1 - Aléatoire" l'effet à appliquer est automatiquement choisi de manière aléatoire. Chaque fois que vous sélectionnez un effet, le programme affiche un aperçu dans la fenêtre appropriée.

§Temps d'affichage: permet de définir le temps (en secondes) durant lequel l'image est affichée.
Cliquez pour etendre/reduire Référence: les commandes de la Section Zoom et Position

Cette section permet de définir le type de mouvement et d'agrandissement à appliquer aux images sur lesquelles vous êtes en train de travailler.

§Position de départ: permet de définir le facteur d'agrandissement et les coordonnées X et Y qui définissent la position initiale d'où part le mouvement de l'image.

§Position finale: permet de définir le facteur d'agrandissement et les coordonnées X et Y qui définissent la position finale où s'achève le mouvement de l'image.

Dans les deux cas, vous pouvez agir directement sur l'aperçu pour le faire glisser dans la position voulue et définir ainsi les positions initiale et finale du mouvement.

Sur cette image, vous pouvez aussi définir un effet en entrée ou un effet prévoyant le mouvement et le zoom. Dans ce cas, le programme applique d'abord l'effet en entrée et l'image est affichée selon les coordonnées et les dimensions définies pour la position initiale. Par conséquent, il reproduit le déplacement, et éventuellement le redimensionnement, pour que l'image atteigne les coordonnées et les dimensions définies pour la position finale.
Cliquez pour etendre/reduire Référence: les commandes de la Section Page

Cette section est active seulement pour les images de l'objet Diaporama inséré dans l'En-tete/Pied-de-page du Modèle graphique (voir, Modifier le modèle).

Re-propose le Plan du site: en cochant à côté d'une Page, sont sélectionnées celles où l'Image du Diaporama sur lequel vous travaillez doivent être affichées. Ainsi les parties d'un Objet Diaporama présentes dans l'En-tete/Pied-de-page du Modèle peuvent être affichées à différents endroits du Site.

Pour les messages publicitaires, par exemple, il est très utile d'indiquer dans quelles pages d'un site vous voulez afficher certaines images d'un Diaporama. Le Diaporama permet de définir toutes les bannières à utiliser dans le site et faire en sorte que seulement les messages pertinents soient affichés dans les pages ou les sections.


Fenêtre Télécharger le fichier associé

Étape 3 - Création de la page > Fonctions communes >

Fenêtre Télécharger le fichier associé

 Return to chapter overview

Cette fenêtre est rappelée à l'aide du bouton Ajouter... relatif à la composition de la liste des fichiers associés ou à une Animation Flash (voir Objet Animation Flash | Avancées) ou à un code HTML (voir , Objet HTML et Widgets | Avancées).

Les commandes disponibles sont:

§Fichier annexe à télécharger sur le serveur: permet de définir un fichier à importer relié à l'Objet sur lequel vous êtes en train de travailler.

§Chemin d'accès au serveur: permet d'indiquer le chemin du dossier où le fichier importé, à savoir relié à l'objet, doit être publié.

§Créer un lien entre le fichier et la Page (fichiers .js et .css seulement): si le fichier importé est un fichier JavaScript (format .js) ou une feuille de Style (format .css), pour fonctionner il doit être relié à la page par code. Dans ces cas, si vous sélectionnez cette option, le code nécessaire est automatiquement inséré dans la section <HEAD> du code HTML de la page.


Paramètres avancés

Étape 4 - Paramètres avancés >

Paramètres avancés

 Return to chapter overview

Après avoir dessiné le plan du site à l'étape 2 et créé chaque page en insérant tous les contenus nécessaires à l'étape 3, vous pouvez passer à l'étape 4 où est proposée une série de sections contenant de nombreuses fonctions avancées. Vous pouvez ainsi définir le style des différents menus de navigation et des textes mais aussi créer des sections importantes du site comme le panier e-commerce, le blog ou la zone réservée.

Dans le détail, les fonctions avancées disponibles sont:

Menu principal

Cette section permet de définir l'aspect graphique des rubriques du menu de premier niveau, à savoir le menu qui est toujours visible en haut (structure à menu horizontal) ou sur le côté (structure à menu vertical) du site représentant la navigation fixe.

Liste déroulante

Cette section permet de définir l'aspect graphique des rubriques du menu Popup qui apparaît au passage de la souris sur une rubrique du menu principal.

Menu de la page

Cette section permet de définir l'aspect graphique du menu de la page, à savoir le menu proposant la liste des pages du niveau courant.

Styles et modèles

Cette section permet de définir les styles à appliquer aux différents éléments de texte présents dans les pages, à la fenêtre ShowBox liée à l'Objet de la galerie, aux Info-bulles pouvant être associées aux Lien et aux courriels créés si vous utilisez l'Objet Formulaire d'envoi d'email ou si vous créez un Panier virtuel e-commerce.

Page d'accueil

Cette section permet de définir une page d'accueil qui introduit le site, en prévoyant une bande sonore et les liens nécessaires pour choisir la langue de consultation.

Message publicitaire

Cette section permet de définir et de personnaliser un message publicitaire qui sera affiché seulement dans la page d'accueil ou sur toutes les pages du site, à l'endroit indiqué.

Blog

Cette section permet de créer et de gérer un Blog, une sorte d'agenda sur le Web pour publier des nouvelles que les utilisateurs pourront commenter.

Flux RSS

Cette section permet de créer un Flux RSS, servant de canal d'informations constamment mis à jour.

Gestion des données

Cette section permet de définir les méthodes de gestion des données récoltées par les éléments du Site comme les formulaires pour l'envoi d'e-mail, le Blog, le Livre d'or ou le Panier e-commerce.

Gestion de l'accès

Cette section permet de créer les profils utilisateurs qui pourront accéder aux pages protégées du site et les gérer en groupes. Les pages protégées, définies dans l'étape 2 pendant la Création du plan, constituent une zone réservée à laquelle les utilisateurs ne pourront accéder qu'en effectuant une connexion: les données d'accès utilisées déterminent quelles pages protégées peuvent être effectivement affichées.

Panier virtuel e-commerce

Cette section permet de créer et de gérer un panier e-commerce, en définissant des aspects tels que: la liste des produits, les méthodes d'expédition et de paiement, la composition du formulaire à remplir pour l'envoi de la commande.

Pour plus de renseignements sur la création du plan et la distinction entre les rubriques de premier et second niveau, menu Popup et sous-menu, reportez-vous à la Création du plan.


Style du menu de premier niveau

Étape 4 - Paramètres avancés >

Style du menu de premier niveau

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre propose les commandes permettant de définir certains paramètres avancés relatifs au style graphique des boutons servant à afficher les éléments de premier niveau du menu.

Les menus sont créés et mis à jour automatiquement par le programme en fonction du Plan du site conçu à l'étape 2 - Création du plan. Le menu principal présente les éléments de premier niveau du Plan composant la navigation fixe du site. Dans les sites à menu horizontal, le menu principal est toujours visible, positionné immédiatement au-dessus ou au-dessous de l'en-tête. Dans les sites à menu vertical, le menu principal est toujours visible, positionné dans une colonne à gauche ou à droite du contenu de la page.

Les commandes nécessaires pour personnaliser les boutons sont organisés dans les sections suivantes:Général, Éléments de menu et Style 3D.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les options de la section Général de la fenêtre Style du menu de premier niveau permettent de définir certaines prédispositions générales du menu principal.

Les options disponibles dans le cadre Style sont:

§Largeur: permet de définir la valeur en pixels de la largeur des boutons contenant les éléments du menu.

§Marge: permet de définir la valeur en pixels de la marge horizontale et verticale, qui est l'espace entre la bordure du bouton et le texte qu'il contient.

§Distance entre les boutons: permet de définir la valeur en pixels de la marge extérieure, à savoir l'espace situé entre deux boutons.

§Défilement automatique du menu: si vous sélectionnez cette option, le menu de navigation défile automatiquement avec le contenu de la page et donc il est toujours visible sur l'écran.

La largeur des boutons doit être définie en considérant l'espace total disponible pour le menu: si vous n'utilisez pas un modèle graphique prédéfini, vous pouvez modifier ce paramètre à votre gré (voir Modèle personnalisé).

Les options présentes dans le cadre Texte sont:

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet de définir l'alignement du texte à Gauche, au Centre ou à Droite par rapport au bouton.

§Utiliser l'antialias pour afficher le texte: si vous sélectionnez cette option, vous appliquez un effet antialiasing au texte qui rend les contours moins dentelés.
Cliquez pour etendre/reduire Référence: les commandes de la Section Éléments de menu

Les options de cette section permettent de définir les couleurs, les images d'arrière-plan et le style des textes pour les différents états des boutons du menu principal.

Dans ce cas également, vous devez tout d'abord sélectionner l'Élément de menu sur lequel vous voulez travailler: vous pouvez définir l'aspect de l' [image] Élément de menu et celui de l' [image] Élément sur mouseover/Page courante. Pour sélectionner l'élément du menu, vous pouvez soit utiliser la liste déroulante soit agir directement sur l'image d'Aperçu qui est constamment mise à jour en fonction des modifications effectuées.

Pour tous les éléments du Menu il est possible d'agir sur les options suivantes du cadre Style:

§Couleur d'arrière-plan / Couleur de texte / Couleur bordure: permettent de définir la couleur de l'arrière-plan, du texte et de la bordure du Bouton.

§Image d'arrière-plan: permet de définir l'image qui doit être affichée comme arrière-plan du Bouton. Pour sélectionner l'image à utiliser, cliquez sur le bouton [image] pour parcourir les ressources disponibles: vous pouvez utiliser des fichiers au format .JPG, .GIF, .PNG. Autrement, vous pouvez cliquer sur la flèche à côté du champ pour ouvrir la librairie des boutons et choisir une image à utiliser.

§Style de police: pour l'élément Élément de menu, vous pouvez définir le style du texte du bouton en choisissant parmi Aucun, Bas-relief, Haut-relief et Ombre.L'option Élément sur mouseover/Page courante prend automatiquement la prédisposition définie pour l'option Élément de menu: par ailleurs, vous pouvez ajouter l'un des styles suivants: Normal, Gras, Italique et Gras Italique.
Cliquez pour etendre/reduire Référence: les commandes de la Section Style 3D

Les commandes de cette section permettent de définir la forme et l'aspect 3D des Boutons.

À l'aide des options du cadre Forme vous pouvez définir:

§Forme: permet de définir la forme du bouton, en la choisissant parmi celles qui sont proposées.

§Arrondissement: permet de définir le facteur d'arrondissement sur les formes de bouton qui prévoit des angles arrondis ou différents d'un rectangle.

§Fusionner la forme des boutons: si vous sélectionnez cette option, les boutons sont unis et la forme choisie est appliquée à l'ensemble des boutons.

Dans le cadre Style 3D on dispose des options suivantes:

§Style: permet de définir l'aspect du bouton comme Bombé, Plat, Bombé plat, Creux, etc.

§Direction de la lumière: permet de définir l'effet lumière défini pour le bouton.

§Facteur dégradé: permet de définir le facteur de dégradé à appliquer au bouton.

§Transparence image: permet de définir le facteur de transparence pour les images insérées sur les boutons du menu à travers les options de la section Éléments de menu.

Enfin, le cadre Bordure 3D dispose des options suivantes:

§Bordure: permet de définir le style de la bordure du bouton comme Normal, Bombé, Creux.

§Epaisseur extérieure / Epaisseur intérieure: permettent de définir l'épaisseur externe et interne de la bordure du bouton.

§Bordure externe uniquement: la bordure est dessinée, en fonction des prédispositions définies, non pas pour chaque bouton mais pour tout le bloc des boutons dans son ensemble.


Style de menu déroulant

Étape 4 - Paramètres avancés >

Style de menu déroulant

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre propose les commandes permettant de définir certains paramètres avancés relatifs au style graphique des listes déroulantes.

Les menus sont créés et mis à jour automatiquement par le programme en fonction du Plan du site conçu à l'étape 2 - Création du plan. Les listes déroulantes sont affichées au passage de la souris sur un élément du menu principal.

Les commandes nécessaires pour personnaliser les boutons sont définies dans les sections suivantes:Général, Éléments de menu et Style 3D.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les options de cette section permettent de définir certains paramétrages généraux du menu déroulante.

Vous devez définir tout d'abord le Type de menu en choisissant parmi:

Organiser sur une colonne: toutes les rubriques de la liste déroulante sont organisées en une seule colonne, l'une après l'autre.

Organiser sur plusieurs colonnes: les rubriques de la liste déroulante sont organisées en plusieurs colonnes côte à côte. Le programme crée automatiquement une nouvelle colonne quand:

§le nombre d'éléments atteint ou dépasse la valeur définie pour l'option Éléments max. par colonne;

§la liste des pages est interrompue par un séparateur (voir, Création du plan).

Par ailleurs, si dans la fenêtre Sélection du modèle ou Modèle personnalisé vous avez défini le Menu vertical, vous disposez aussi de:

Accordéon vertical: tous les éléments de la liste déroulante sont organisés en une seule colonne; quand l'utilisateur clique sur un élément, tous les éléments suivants se déplacent vers le bas pour afficher les sous- éléments associés.

Après avoir choisi le Type de menu, vous pouvez définir les options proposées dans le cadre Style:

§Largeur: permet de définir la valeur en pixels de la largeur des boutons contenant les éléments du menu.

§Marge: permet de définir la valeur en pixels de la marge horizontale et verticale, qui est l'espace entre la bordure du bouton et le texte qu'il contient.

§Éléments max. par colonne: activée seulement pour le type de menu Organiser sur plusieurs colonnes, elle permet de définir le nombre maximum d'éléments pouvant être contenus dans chaque colonne de la liste déroulante.

Les options présentes dans le cadre Texte sont:

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet de définir l'alignement du texte à Gauche, au Centre ou à Droite par rapport au bouton.

Enfin, le cadre Options propose:

§Effet: permet de définir l'effet d'affichage pour la liste déroulante, en choisissant parmi Aucun, Fondu, Rebond supérieur, Rebond gauche, Rebond supérieur gauche.

§Sélectionner automatiquement la page en cours: activée seulement pour le type de menu Accordéon vertical, elle permet, selon la Page du Site ouverte, d'étendre automatiquement le Menu de façon à afficher comme sélectionné l'élément correspondant.
Cliquez pour etendre/reduire Référence: les commandes de la Section Éléments de menu

Les options de cette section permettent de définir les couleurs, les images d'arrière-plan et le style des textes pour les différents états des boutons de la liste déroulante.

Dans ce cas également, vous devez tout d'abord sélectionner l'Élément de menu sur lequel vous voulez travailler: vous pouvez définir l'aspect de l' [image] Élément de menu, de l' [image] Élément sur mouseover et du [image] Séparateur. Pour sélectionner l'élément du menu, vous pouvez soit utiliser la liste déroulante soit agir directement sur l'image d'Aperçu qui est constamment mise à jour en fonction des modifications effectuées.

Pour les éléments du menu, vous pouvez utiliser les options suivantes du cadre Style:

§Couleur d'arrière-plan / Couleur de texte / Couleur bordure: permettent de définir la couleur de l'arrière-plan, du texte et de la bordure du Bouton. Pour l'élément Séparateur vous disposez seulement de la commande Couleur de texte.

§Style de police: pour les éléments Élément sur mouseover et Séparateur, elle permet de définir le style du texte en choisissant parmi Normal, Gras, Italique et Gras Italique.

§Image d'arrière-plan: disponible uniquement pour les éléments Élément de menu et Élément sur mouseover, permet de définir l'image qui doit être affichée comme arrière-plan du Bouton. Pour sélectionner l'image à utiliser, cliquez sur le bouton [image] pour parcourir les ressources disponibles: vous pouvez utiliser des fichiers au format .JPG, .GIF, .PNG. Autrement, vous pouvez cliquer sur la flèche à côté du champ pour ouvrir la librairie des boutons et choisir une image à utiliser.

§Icône de puce: permet de définir l'image qui doit être utilisée comme liste à puce en regard des éléments des boutons ou des séparateurs insérés. Dans ce cas également, cliquez sur le bouton [image] et sélectionnez un fichier au format .JPG, .GIF, .PNG.
Cliquez pour etendre/reduire Référence: les commandes de la Section Style 3D

Les commandes de cette section permettent de définir la forme et l'aspect 3D des Boutons.

À l'aide des options du cadre Forme vous pouvez définir:

§Forme: permet de définir la forme du bouton, en la choisissant parmi celles qui sont proposées.

§Arrondissement: permet de définir le facteur d'arrondissement sur les formes de bouton qui prévoit des angles arrondis ou différents d'un rectangle.

§Fusionner la forme des boutons: si vous sélectionnez cette option, les boutons sont unis et la forme choisie est appliquée à l'ensemble des boutons.

Dans le cadre Style 3D on dispose des options suivantes:

§Style: permet de définir l'aspect du bouton comme Bombé, Plat, Bombé plat, Creux, etc.

§Direction de la lumière: permet de définir l'effet lumière défini pour le bouton.

§Facteur dégradé: permet de définir le facteur de dégradé à appliquer au bouton.

§Transparence image: permet de définir le facteur de transparence pour les images insérées sur les boutons du menu à travers les options de la section Éléments de menu.

Enfin, le cadre Bordure 3D dispose des options suivantes:

§Bordure: permet de définir le style de la bordure du bouton comme Normal, Bombé, Creux.

§Epaisseur extérieure / Epaisseur intérieure: permettent de définir l'épaisseur externe et interne de la bordure du bouton.

§Bordure externe uniquement: la bordure est dessinée, en fonction des prédispositions définies, non pas pour chaque bouton mais pour tout le bloc des boutons dans son ensemble.


Style du menu de la page

Étape 4 - Paramètres avancés >

Style du menu de la page

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre propose les commandes permettant de définir certains paramètres avancés relatifs au style graphique des boutons du menu de la page.

Les menus sont créés et mis à jour automatiquement par le programme en fonction du Plan du site conçu à l'étape 2 - Création du plan. Les menus de la page sont ceux qui peuvent être affichés en option pour proposer la liste des pages du niveau courant. En d'autres mots, si vous ouvrez une page qui appartient à un niveau et que ce niveau contient d'autres pages, le menu de la page propose la liste de toutes les pages de ce niveau. Les menus de la page sont toujours proposés comme menus verticaux, positionnés à droite ou à gauche des contenus de page.

Les commandes nécessaires pour procéder à la personnalisation des boutons sont organisées dans les sections suivantes: Général et Éléments de menu.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les commandes de cette section permettent de définir certains paramètres généraux du Menu de Page.

Tout d'abord, si vous voulez afficher un Menu de Page contenant la liste des pages du niveau courant, sélectionnez l'option Afficher le menu de la page.

À ce stade, vous pouvez agir sur les options du cadre Style:

§Position menu: permet d'indiquer si le menu de la page doit être affiché sur le côté droit ou gauche de la page.

§Largeur: permet de définir la valeur en pixels de la largeur des boutons contenant les éléments du menu.

§Marge: permet de définir la valeur en pixels de la marge horizontale et verticale, qui est l'espace entre la bordure du bouton et le texte qu'il contient.

§Distance entre les boutons: permet de définir la valeur en pixels de la marge externe, qui est l'espace entre deux boutons.

Les options présentes dans le cadre Texte sont:

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet de définir l'alignement du texte à Gauche, au Centre ou à Droite par rapport au bouton.

Enfin, le cadre Bordure permet de dessiner un bord autour du Menu de Page (du bloc menu) en définissant les options suivantes:

§Epaisseur: spécifie l'épaisseur des bords, du bloc menu.

§Couleur: spécifie la couleur des bords, du bloc menu.

§Coins arrondis: définit le facteur d'arrondissement des angles, du bloc menu.

§Ombre: applique une ombre, définissant la couleur, la position, la diffusion et la taille.
Cliquez pour etendre/reduire Référence: les commandes de la Section Éléments de menu

Les options de cette section permettent de définir certains paramètres graphiques pour définir l'aspect des rubriques du Menu de Page.

Dans ce cas également, vous devez tout d'abord sélectionner l'Élément de menu sur lequel vous voulez travailler: vous pouvez définir l'aspect de l' [image] Élément de menu, de l' [image] Élément sur mouseover/Page courante, du [image] Séparateur et du [image] Séparateur de lignes. Pour sélectionner l'élément du menu, vous pouvez soit utiliser la liste déroulante soit agir directement sur l'image d'Aperçu qui est constamment mise à jour en fonction des modifications effectuées.

§Couleur d'arrière-plan / Couleur de texte / Couleur de ligne: permettent de définir la couleur de l'arrière-plan et du texte de l'Élément de menu, de l'Élément sur mouseover/Page courante et du Séparateur, ainsi que la couleur de la ligne pour le Séparateur de lignes.

§Icône de puce: disponible pour l'Élément de menu, Élément sur mouseover/Page courante et Séparateur, permet de définir l'image (fichier au format .JPG, .GIF, .PNG) qui doit précéder les éléments du Menu de Page, comme s'il s'agissait d'une liste à puce.

§Style de police: pour les éléments Élément sur mouseover/Page courante et Séparateur, permet de définir le style du texte en choisissant entre Normal, Gras, Italique et Gras Italique.

§Style de ligne: disponible seulement pour le Séparateur de lignes, permet de définir le type de ligne en choisissant parmi Solide, En tirets, Point, Bas-relief, Haut-relief.


Styles et modèles

Étape 4 - Paramètres avancés >

Styles et modèles

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre présente les commandes permettant de définir les styles à appliquer aux différents éléments de texte présents dans les pages, à la Boîte d'affichage liée aux éléments comme l'Objet de la galerie et l'Objet Liste des produits, aux info-bulles pouvant être associées aux Lien et aux e-mails créés avec l'Objet Formulaire d'envoi d'email ou si vous créez un Panier virtuel e-commerce.

En général, un Style peut être défini comme un ensemble de caractéristiques de formatage du texte et graphique pouvant être appliqué à un élément pour modifier son aspect. L'application d'un style permet donc d'associer plusieurs formats simultanément à travers une seule opération.

Les commandes nécessaires pour procéder à la définition des Styles sont organisées dans les options suivantes: Textes, Boîte d'affichage, Info-bulle et E-mail.

Cliquez pour etendre/reduire Référence: les commandes de la Section Textes

Les commandes de cette section permettent de définir les Styles disponibles pour les textes présents sur le site.

Tout d'abord, vous devez choisir l'Élément de page dont vous voulez définir le Style, en le sélectionnant dans la liste déroulante ou, autrement, en cliquant directement sur l'élément dans l'Aperçu.

Dans le détail, les Éléments de page auxquels vous pouvez appliquer un style sont:

Titre de la page: il s'agit du titre des pages du site. Il est pris dans le nom donné aux pages lors de la phase de construction du plan dans la fenêtre Création du plan ou, s'il est spécifié différemment, dans le Titre complet de la fenêtre Propriétés de page.

Chemin de la page: il s'agit du texte situé sous le titre de la page qui permet de reconstruire le chemin logique (chemin de navigation ou "fil d'Ariane") conduisant à cette page. Le chemin logique est automatiquement recréé par le programme.

Texte de la page: c'est le texte des paragraphes insérés au moyen de l'Objet Texte. Le style de cet élément est appliqué par défaut quand vous ouvrez l'éditeur relatif à l'Objet Texte: grâce aux commandes fournies par l'éditeur, vous pouvez effectuer d'autres modifications et d'autres personnalisations. Le Style défini pour ce type d'élément est appliqué à tous les textes créés et insérés automatiquement par le programme comme, par exemple, les pages de la Zone réservée, du Blog, du Moteur de recherche interne et du Plan du site.

Lien actif / Lien au passage de la souris / Lien cliqué: ce sont les liens hypertextuels créés au moyen de l'Objet Texte. Un lien peut avoir un aspect différent selon son état: actif, au passage de la souris (effet mouseover) ou cliqué. Distinguer visuellement un lien actif d'un lien déjà cliqué simplifie la navigation de l'utilisateur, en lui rappelant les sections qu'il a déjà explorées.

Champ / Bouton: ce sont des champs et des boutons des formulaires créés au moyen de l'Objet Formulaire d'envoi d'email ou le Panier e-commerce, autre que les éléments comme le Champ de Recherche (voir, Modifier le modèle | Insérer champ de recherche), les champs Connexion/Déconnexion de la Zone Réservée, etc. Le style de ces éléments est appliqué par défaut quand on crée un nouvel Objet Formulaire d'envoi d'email: ensuite, vous pouvez modifier ces paramètres pour votre formulaire au moyen de les options dans la section Objet Formulaire d'envoi d'email | Style.

Menu de pied de page: c'est le menu, situé au bas de chaque page, proposant les options du menu de premier niveau.

Après avoir sélectionné l'Élément de page, vous pouvez modifier son style à l'aide des options du cadre Style:

§Afficher: si vous sélectionnez cette option, vous pouvez faire en sorte que l'élément de page soit visible ou non. Cette option, bien évidemment, n'est pas disponible pour le Texte de la page et les différents états du Lien, des Champs et des Boutons qui ne peuvent pas être invisibles. Il est important de souligner que rendre un élément de la page invisible ne signifie pas le supprimer du code de la page: vous pouvez, par exemple, rendre invisible le Titre de la page car vous préférez utiliser une image mais, dans ce cas également, le tag <title> ne sera pas supprimé du code HTML.

§Couleur d'arrière-plan / Couleur de texte: permettent d'indiquer la couleur de l'arrière-plan et du texte de l'élément de page sélectionné. Pour le Texte de la page, vous ne pouvez pas définir la couleur de l'arrière-plan car elle est définie en fonction du modèle choisi (voir Sélection du modèle, ou Modèle personnalisé) et/ou du Style de cellule où est inséré l'Objet Texte.

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet d'indiquer l'alignement de l'élément de page, en choisissant parmi Gauche, Centre et Droite. Cette option n'est pas disponible pour les différents états du Lien car l'alignement des liens hypertextuels est défini, quel que soit le Style, lors de la création de l'Objet Texte, comme pour les Champs et les Boutons.

§Style de textes: disponible pour le Lien dans ses différents états, permet de définir le style du texte comme Normal ou Souligné.

§Pointeur: disponible seulement pour le Lien actif, il est automatiquement hérité des les deux autres états du Lien, il permet d'indiquer l'aspect du pointeur de la souris lors du passage sur le lien. Si vous cliquez sur [image], vous pouvez sélectionner le fichier .CUR, .ICO à utiliser.

§Couleur bordure: permet d'indiquer la couleur de la bordure qui peut être ajoutée au Titre de la page, au Chemin de la page et au Menu de pied de page.

§Coins arrondis: permet d'indiquer le facteur d'arrondissement pour les angles en particulier pour les options de style de Champ / Bouton.

§Ombre: applique une ombre dans le Champ, pour définir la couleur, la position, la diffusion et la taille.

§Marge horizontale: permet d'indiquer la marge horizontal pour le Titre de la page, le Chemin de la page et le Menu de pied de page.
Cliquez pour etendre/reduire Référence: les commandes de la Section Boîte d'affichage

Les commandes de cette section permettent de définir le style de la Boîte d'affichage utilisée dans les Galeries (voir, Objet de la galerie), dans le Lien Galerie ShowBox (voir, Lien | Action) et dans l'Objet Liste des produits. La Boîte d'affichage, qui s'ouvre en cliquant sur un lien, sert à afficher une image agrandie, une vidéo ou une séquence entière d'images: quand vous cliquez sur le lien, la fenêtre du navigateur devient foncée pour mettre en évidence la Boîte d'affichage qui est superposée selon l'effet d'entrée choisi.

Les options disponibles dans la section Style sont:

§Aspect: permet de définir un effet d'entrée pour la Boîte d'affichage en choisissant parmi Aucun, Fondu, Déplacer du haut, Zoom , Zoom et Masquer l'image de démarrage. Les effets Zoom et Zoom et Masquer l'image de démarrage se ressemblent mais ils sont différents par le fait que l'image de départ reste ou non visible pendant l'agrandissement. L'effet Zoom et Masquer l'image de démarrage est, donc, particulièrement indiqué quand le lien, qui permet d'afficher la fenêtre de la Boite d'affichage, est associé à une image plutôt qu'à un texte.

§Couleur externe / Couleur interne: permettent de définir la couleur de l'arrière-plan externe et/ou interne à la Boîte d'affichage. La couleur de l'arrière-plan externe est celle qui devient semi-transparente (selon la valeur définie pour l'option Opacité arrière-plan) et est utilisée pour foncer la fenêtre du navigateur.

§Opacité arrière-plan: permet de définir la valeur d'opacité de l'arrière-plan externe. Plus la valeur d'opacité est élevée, moins la fenêtre du navigateur située au-dessous sera visible.

Les options présentes dans le cadre Texte sont:

§Couleur de texte: permet de définir la couleur du texte de la Boîte d'affichage.

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet de définir l'alignement du texte à Gauche, au Centre ou à Droite par rapport à la Boîte d'affichage.

Le cadre Bordure présente les options suivantes:

§Epaisseur: spécifie l'épaisseur des bords, du bloc menu.

§Couleur: spécifie la couleur des bords, du bloc menu.

§Coins arrondis: définit le facteur d'arrondissement des angles, du bloc menu.

§Ombre: applique une ombre, définissant la couleur, la position, la diffusion et la taille.
Cliquez pour etendre/reduire Référence: les commandes de la Section Info-bulle

Les commandes de cette section permettent de définir le Style à appliquer aux Info-bulles associées aux Liens insérés sur les textes ou les images au moyen de la commande Inserisci collegamento Lien. L'Info-bulle est un bref texte d'aide, affiché dans une boîte lors du passage de la souris sur un lien: sa fonction est d'offrir une explication sur ce qui se passera en cliquant.

Pour définir l'aspect de l'Info-bulle vous pouvez, en premier lieu, utiliser les options présentes dans le cadre Style:

§Position Tooltip: permet d'indiquer la position des Info-bulles par rapport au lien auquel elles sont associées, en choisissant parmi Haut, Bas, Gauche et Droite.

§Aspect: permet de choisir si les Info-bulles doivent être affichées avec un effet d'entrée comme Aucun, Fondu ou Alterné.

§Couleur d'arrière-plan: permet d'indiquer la couleur de l'arrière-plan des Info-bulles..

§Opacité arrière-plan: permet de définir la valeur d'opacité de l'arrière-plan externe. Plus la valeur d'opacité est élevée, moins la fenêtre du navigateur située au-dessous sera visible.

§Afficher l'aileron: permet d'ajouter à la bulle des Info-bulles une flèche pointant vers le lien auxquels elles sont associées.

Enfin, les options présentes dans le cadre Texte sont:

§Couleur de texte: permet de définir la couleur du texte des info-bulles.

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet de définir l'alignement du texte à Gauche, au Centre ou à Droite par rapport à l'Info-bulle.

Le cadre Bordure présente les options suivantes:

§Epaisseur: spécifie l'épaisseur des bords, du bloc menu.

§Couleur: spécifie la couleur des bords, du bloc menu.

§Coins arrondis: définit le facteur d'arrondissement des angles, du bloc menu.

§Ombre: applique une ombre, définissant la couleur, la position, la diffusion et la taille.

Comme les paramètres de style sont valides pour tout le projet, toutes les Info-bulles auront le même aspect graphique. Pour définir le contenu (texte et image) de chaque Info-bulle, utilisez la fenêtre Lien | Description.
Cliquez pour etendre/reduire Référence: les commandes de la Section E-mail

Les commandes de cette section permettent de définir le style des e-mails créés par l'Objet Formulaire d'envoi d'email ou par le Panier virtuel e-commerce.

Tout d'abord, vous devez sélectionner l'Élément de courriel dont vous voulez définir le style en le sélectionnant dans la liste déroulante, vous pouvez également cliquer directement sur son Aperçu.

Dans le détail, les Éléments de l'e-mail auxquels vous pouvez appliquer un style sont:

Mise en page du message: les e-mails créés par le programme ont une structure identique qui prévoit un cadre externe d'arrière-plan et un corps central avec le message. Entre le cadre externe et le corps central, vous pouvez prévoir une bordure qui sépare ou crée une profondeur et une épaisseur.

Image/Logo société: c'est l'image à insérer dans l'en-tête de l'e-mail. On peut insérer un logo d'entreprise ou une bannière qui arrive à occuper toute la largeur de l'e-mail.

Contenu du message: c'est le corps de l'e-mail contenant le message.

Note de pied de page: ce sont les remarques de fermeture de l'e-mail qui contiennent, en général, un message standard ; elles se distinguent visuellement du corps du message car leur taille de police est plus petite.

Selon l'Élément de courriel sélectionné, vous pouvez agir sur les différentes options de la section Style:

Mise en page du message

§Couleur d'arrière-plan: permettent d'indiquer la couleur de l'arrière-plan externe, à savoir du cadre de l'e-mail.

§Couleur bordure / Epaisseur: permettent, respectivement, d'indiquer la couleur et l'épaisseur de la bordure qui sépare le cadre externe du corps de l'e-mail.

Image/Logo société

§Fichier image: permet de sélectionner l'image à insérer dans l'en-tête de l'e-mail. Il suffit de cliquer sur [image] pour sélectionner le fichier graphique au format .JPG, .GIF ou .PNG à importer.

§Alignement: permet d'indiquer l'alignement de l'image insérée, en choisissant parmi Gauche, Centre et Droite.

§Position: permet d'indiquer si l'image insérée doit être positionnée À l'intérieur du cadre ou À l'extérieur du cadre relatif au corps de l'e-mail.

§Largeur: indique automatiquement la largeur originale de l'image et permet de la modifier librement. La largeur maximum pour les images est de 700 pixels et dépend de la structure de l'e-mail. Ce paramètre garanti un affichage correct pour toutes les différentes boîtes de courriel.

Contenu du message

§Couleur d'arrière-plan: permet d'indiquer la couleur de l'arrière-plan du texte du message de l'e-mail.

§Couleur de texte: permet d'indiquer la couleur du texte du message de l'e-mail.

§Police: spécifie le type de Police, le Style et la taille du texte.

Note de pied de page

§Couleur d'arrière-plan: permet d'indiquer la couleur de l'arrière-plan du texte des remarques figurant au bas de l'e-mail.

§Couleur de texte: permet d'indiquer la couleur du texte des remarques figurant au bas de l'e-mail.

§Police: spécifie le type de Police, le Style et la taille du texte.

§Alignement: permet d'indiquer l'alignement des Notes de pied de page, en choisissant entre Gauche, Centre et Droite.

§Position: permet d'indiquer si les Notes de pied de page doivent être positionnées À l'intérieur du cadre ou À l'extérieur du cadre relatif au corps de l'e-mail.

§Texte: permet de composer le texte composant la Note de pied de page. Par défaut, le programme propose un texte sur la confidentialité du message.


Page d'accueil

Étape 4 - Paramètres avancés >

Page d'accueil

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre propose les commandes permettant de créer une page d'introduction au site et de la prédisposer pour la consultation en plusieurs langues.

Tel que l'indique son nom, la Page de Bienvenue est une sorte de couverture initiale du site: en général, elle présente une image, une vidéo ou une animation Flash, et elle permet d'accéder à la véritable Page d'accueil au terme du délai programmé ou du clic sur le lien. Si nécessaire, cette page d'introduction peut aussi proposer les liens permettant de choisir la langue de consultation du site.

Cliquez pour etendre/reduire Référence: les commandes pour mettre en place une Page Bienvenue

Comme la Page de bienvenue est un élément facultatif d'un site, pour l'insérer il faut tout d'abord sélectionner l'option Afficher la page d'accueil. Si elle est présente, la Page de bienvenue est la première à s'afficher et, au terme du délai programmé ou du clic sur un lien, le programme affiche la Page d'accueil du site.

Vous pouvez composer la Page de Bienvenue en définissant l'arrière-plan et le contenu, mais aussi une éventuelle bande sonore.

Les options présentes dans le cadre Contenu de la page sont:

§Type: permet d'indiquer le type de contenu à insérer dans la Page de Bienvenue, en choisissant parmi Image, Animation Flash, Vidéo et Code HTML.

§Fichier: si vous choisissez comme Type de contenu l'Image, l'Animation Flash ou la Vidéo, vous pouvez définir le fichier graphique (au format .JPG, .GIF, .PNG), le fichier Animation Flash (au format .SWF) ou le fichier Vidéo (au format .FLV, .MP4) à utiliser.

§Code HTML: si vous choisissez comme Type de contenu Code HTML, vous devez entrer le code à insérer dans la Page de Bienvenue. La Barre d'Outils présente les commandes suivantes:

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Coupent, copient et collent le texte sélectionné.

Annuler [CTRL+Z] - Restaurer [ALT+MAJUSC+BACKSPACE]

Annulent et restaurent la dernière opération exécutée/annulée.

Inserer Widgets

Insère le code relatif au Widget sélectionné: en cliquant sur la flèche à côté du bouton, il est possible d'afficher la liste de tous les Widgets disponibles, repris dans la liste de l'Objet HTML et Widgets. Si vous cliquez sur le Widget désiré vous rappelez la fenêtre Widget à travers laquelle il est possible de définir les paramètres prévus. Si vous confirmez, le code HTML relatif au Widget se compose et il est automatiquement inséré dans l'éditeur.

§Taille: permet de définir la taille en pixel de la largeur et de la hauteur de l'Image, de l'Animation Flash, de la Vidéo ou du Code HTML insérés. En laissant active l'option Conserver la proportion, dans la définition de la taille la proportion entre la largeur et la hauteur est maintenue inchangée.

Les options présentes dans le cadre Arrière-plan de la page sont:

§Couleur d'arrière-plan: permet d'indiquer la couleur d'arrière-plan de la Page de Bienvenue.

§Fichier image: sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan.

§Disposition: permet d'indiquer si l'image insérée comme arrière-plan doit être répétée ou non. L'image peut être répétée horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. En plus, il est possible de faire en sorte que l'image soit adaptée, autrement redimensionnée de façon à couvrir tout l'arrière-plan.

§Alignement: permet de choisir l'alignement de l'image sur la fenêtre du navigateur.

Enfin, dans le cadre Options sont présentes les options suivantes:

§Son à l'ouverture: permet de définir le fichier audio (au format .MP3) à utiliser comme fond musical lors de l'affichage de la Page de Bienvenue.

§Ouvrir la page d'accueil après [sec]: si vous sélectionnez cette option, vous devez indiquer le nombre de secondes durant lesquelles la Page de Bienvenue sera affichée. Au terme de ce délai, la Page d'accueil est automatiquement affichée.
Cliquez pour etendre/reduire Référence: les commandes pour mettre en place la langue de consultation

Si le site peut être consulté en plusieurs langues, pour permettre à l'utilisateur de sélectionner la langue voulue à travers les boutons insérés dans la page de Bienvenue, vous devez tout d'abord sélectionner l'option Afficher les liens vers d'autres langues.

Dans le cadre Liste de langues, vous devez composer la liste des langues disponibles. Par défaut, le programme propose une liste composée de 5 langues que vous pouvez modifier librement à l'aide des commandes disponibles:

§Ajouter... / Supprimer: permettent de composer la liste des langues de consultation respectivement en ajoutant une nouvelle Langue (dans la fenêtre Sélection des langues) ou en supprimant une langue déjà insérée.

§En haut / En bas: permettent de modifier l'ordre des langues présentes dans la liste, en déplaçant vers le haut ou le bas la langue sélectionnée.

§Présélection: permet de définir la langue sélectionnée dans la Liste de langues comme "prédéfinie". La langue "prédéfinie" est celle à laquelle on accède immédiatement avant de choisir la langue de consultation préférée. Le site ayant une langue prédéfinie est le seul présentant la Page de Bienvenue (pour plus d'informations, voir Comment créer un Site multilingue).

§Modifier...: permet de rappeler la fenêtre Sélection des langues pour modifier les paramètres définis pour la langue sélectionnée parmi celles déjà insérées dans la Liste de langues.

Enfin, est disponible l'option:

§Exécuter le lien dans une nouvelle fenêtre: si vous sélectionnez cette option, le site est ouvert dans une nouvelle fenêtre du navigateur, différente de celle où est déjà ouverte la Page de Bienvenue.

Même si la fenêtre de la page de Bienvenue parle explicitement de langues, vous pouvez exploiter cette situation pour permettre à l'utilisateur de choisir non seulement une langue de consultation mais, plus en général, différentes versions du site. Par exemple, vous pouvez définir le choix entre "version HTML / version Flash" ou entre "version convenant aux mineurs / version adressée seulement aux adultes".

Si vous activez l'affichage d'une Page de Bienvenue, la Page Spéciale "Page de Bienvenue" sera automatiquement affichée dans le Plan du site: il est possible de la sélectionner et rappeler la fenêtre Propriétés de page pour en définir les propriétés principales.

Bonnes pratiques:

- | Comment gérer les Langues pour les Textes insérés automatiquement
- | Comment créer un Site multilingue


Fenêtre Sélection des langues

Sélection des langues

Étape 4 - Paramètres avancés > Page d'accueil >

Sélection des langues

 Return to chapter overview

Cette fenetre, rappelée en cliquant sur le bouton Ajouter... ou le bouton Modifier... présents dans la fenetre Page d'accueil, permettent de mettre en place des paramètres relatifs à une langue disponible pour la consultation du Site.

Les options disponibles sont:

§Nom de la langue à afficher : permet d'insérer le nom de la langue qui sera disponible. Si vous cliquez sur la flèche située à côté du champ, vous ouvrez une liste déroulante permettant de sélectionner la langue voulue: vous pouvez également taper directement le nom de la langue.

§Fichier Image pour cette langue (ex.: flag): permet de définir le fichier graphique à utiliser pour créer le bouton associé à la langue. Si vous cliquez sur [image], vous pouvez sélectionner le fichier .JPG, .GIF ou .PNG à utiliser, par exemple, pour créer un bouton avec l'image du drapeau relatif à la Langue.
Si vous n'associez aucune image, au lieu du bouton graphique, le programme crée automatiquement un lien textuel portant le Nom de la langue à afficher comme texte.

§Lien pour cette langue (ex: afficher le site dans cette langue): permet de définir un lien sur l'image importée à travers l'option Fichier Image pour cette langue (ex.: flag).

§En cliquant sur le bouton [image] on appelle la fenêtre Lien qui permet de choisir le type d'action autre que les options relatives.

Si, par exemple, le Site dans la langue indiquée par le drapeau a été déjà publiée, il est possible de choisir l'action Fichier ou URL et spécifier l'URL afin de le lier (ex, http://www.monsite.fr/en/index.html). Dans le cas où vous travaillez sur la langue par défaut, il n'est pas possible de prévoir des liens, car la connexion à la page d'accueil du site actuel est automatiquement associé à la Page d'Accueil.

Remarques sur la compatibilité avec les versions précédentes:

Par rapport à la version 9, la version 10 dans la fenêtre Sélection des langues présente les mises à jour suivantes:

·L'option Dossier sur serveur ou URL du site pour cette langue a été remplacée par l'option Lien pour cette langue (ex: afficher le site dans cette langue): de cette façon vous pouvez définir, comme auparavant, le lien qui pointe vers le dossier sur le Serveur ou l'URL du Site dans une langue spécifique, mais aussi des actions différentes.

·L'option Afficher le choix pour cette langue mais avertit qu'elle n'est pas encore disponible n'est plus présente, puisque vous pouvez créer un message personnalisé, définissant un lien plus approprié sur l'image des drapeaux.

Bonnes pratiques:

- | Comment gérer les Langues pour les Textes insérés automatiquement
- | Comment créer un Site multilingue


Message publicitaire

Étape 4 - Paramètres avancés >

Message publicitaire

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre présente les commandes permettant de prédisposer un Message Publicitaire sur la Page d'accueil ou sur toutes les Pages du Site.

Le Message Publicitaire peut être créé comme une image ou une animation flash affichée à un endroit déterminé de la page contenant un lien vers une Landing Page (ou page de destination). Bien évidemment la Landing Page, qui est une page interne du site, doit être conçue pour convaincre l'utilisateur à mener à bien l'action voulue: remplir un formulaire, effectuer un achat , etc.

Cliquez pour etendre/reduire Référence: les commandes pour mettre en place un Message Publicitaire

Pour insérer un Message Publicitaire, vous devez tout d'abord activer l'option Afficher le message publicitaire.

Vous pouvez choisir le Type de message à définir en sélectionnant l'une des options suivantes:

Afficher les annonces dans le coin supérieur droit: elle correspond à l'effet nommé PagePeel, en positionnant la souris en haut à droite de la page, on découvre le message publicitaire précédemment masqué.

Afficher les annonces dans une case: le message publicitaire est inséré dans une case affichée à un endroit déterminé de la fenêtre du navigateur en surimpression par rapport au contenu de la page.

Afficher les annonces dans une barre horizontale: le message publicitaire est proposé dans une barre horizontale affichée au sommet de la fenêtre du navigateur, avant le contenu réel de la page, ou sur l'arrière-plan de la fenêtre du navigateur, en surimpression par rapport au contenu de la page.

Quel que soit le Type de message sélectionné, vous pouvez utiliser l'option de la boîte Paramètres:

§Fichier image: permet de spécifier le fichier graphique (au format .JPG, .GIF, .PNG) ou le fichier de l'animation Flash (au format .SWF) contenant le message publicitaire voulu.

L'option Afficher les annonces dans le coin supérieur droit dispose des options suivantes:

§Style: permet de choisir, en plus de l'effet classique du coin de la page pliée (PagePeel), d'autres animations à thèmes. De toute façon, le fonctionnement de l'effet ne change pas: quand la souris glisse sur l'animation, l'utilisateur ouvre le message publicitaire relatif.

§Largeur/hauteur: permet d'indiquer la valeur en pixels relative à la largeur et la hauteur de la zone devant accueillir le message publicitaire.

L'option Afficher les annonces dans une case dispose des options suivantes:

§Position: permet d'établir la position où sera affiché le message publicitaire à l'intérieur de la fenêtre du navigateur. Vous pouvez le positionner au Centre, en Haut à Gauche, en Haut à Droite, en Bas à Gauche et en Bas à Droite.

§Effet: permet de définir l'un des effets d'affichage suivants Fondu, Balayage vers le bas, Balayage vers le haut, Balayage vers la droite, Balayage vers la gauche.

§Afficher ce message seulement une fois: si cette option est activée, le message publicitaire n'est affiché qu'une fois, à la première ouverture d'une page du site. Quand vous ouvrirez une nouvelle session de navigation, le message publicitaire sera de nouveau proposé.

Enfin, pour Afficher les annonces dans une barre horizontale les autres options disponibles sont:

§Position: permet de définir si la barre contenant le message publicitaire doit être affichée en haut avant les contenus de la page , ou au fond en surimpression.

§Couleur d'arrière-plan: permet de définir la couleur d'arrière-plan de la barre horizontale contenant le message publicitaire.

§Afficher ce message seulement une fois: si cette option est activée, le message publicitaire n'est affiché qu'une fois, à la première ouverture d'une page du site. Quand vous ouvrirez une nouvelle session de navigation, le message publicitaire sera de nouveau proposé.

Les éléments présents dans le cadre Options, commun à tous les types de messages, sont:

§Lien: permet de définir la page (Landing Page) qui sera liée au message publicitaire.

§En cliquant sur le bouton [image] on appelle la fenêtre Lien qui permet de choisir le type d'action autre que les options relatives.

§Son à l'ouverture: permet de définir le fichier audio (au format .MP3) à reproduire pendant l'affichage du message publicitaire.

Qu'est-ce qu'une Landing page?

La Landing Page est la page qui accueille le visiteur, elle s'affiche parce qu'elle est liée, par exemple, à un lien ou à une bannière publicitaire. Tel que l'indique son nom, c'est la page où l'utilisateur "atterre", elle doit donc être construite de sorte qu'il trouve immédiatement les informations voulues, lui évitant ainsi de naviguer dans le site pour les rechercher.

Le mécanisme peut être expliqué par un exemple: supposons que vous vouliez publier une bannière pour faire la réclame d'un produit. Les informations véhiculées par la bannière sont peu nombreuses et essentielles, mais vous pouvez définir un lien pour guider l'utilisateur vers votre site. Dans ce cas, il ne convient pas de créer un lien vers la Page d'accueil de votre site: celle-ci est trop générale et obligerez l'utilisateur à entreprendre une navigation interne avant de trouver les informations nécessaires sur le produit et la procédure à suivre pour l'acheter. Vous risquez ainsi de perdre un client potentiel. La meilleure solution est de construire une page spécifique à l'aspect simple et fonctionnel où figurent toutes les informations sur le produit indiqué dans la bannière y compris la procédure d'achat. Très souvent, il faut construire expressément une page de ce type mais si elle est bien conçue, elle guide vers l'objectif voulu (par exemple, l'achat du produit) l'utilisateur qui a été attiré par le message publicitaire.

Enfin, dans le cadre Mode d'affichage sont disponibles les options suivantes:

§Montrer uniquement dans la page d'accueil / Montrer dans toutes les pages du site: permettent de définir à quel endroit doit être affiché le message publicitaire, uniquement dans la page d'accueil ou dans toutes les pages du site.


Blog

Étape 4 - Paramètres avancés >

Blog

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre propose les outils et les options nécessaires pour créer un Blog et gérer les commentaires laissés éventuellement par les utilisateurs comme réponse aux Articles publiés.

Le Blog est un genre d'agenda Internet où l'auteur raconte ce qu'il veut à travers une série d'articles (ou Postes) publiés avec une fréquence et une régularité variables.

Après la publication, le Blog créé avec WebSite X5 représente une section individuelle du site principal et il est automatiquement ajouté dans le Plan sous le dossier Pages spéciales (voir Création du plan). Pour insérer l'élément "Blog" dans le Menu de navigation, vous devez créer un alias de la page spéciale en la sélectionnant et la faisant glisser dans le dossier Menu.

Comme le Blog fait partie intégrante du site web, il garde la même conception graphique et reprend automatiquement le modèle défini du site.

Le Blog créé est publié à l'URL http://www.monsite.fr/blog où http://www.monsite.fr est l'URL du site auquel il est relié.

La page principale du Blog montre la liste de tous les Articles (ou Postes) publiés, rangés dans l'ordre chronologique. Pour tous les articles, vous verrez le titre, le nom de l'auteur, la catégorie, la date et l'heure de publication, et, si l'affichage est en forme vue réduite plutôt qu'étendue, la description brève et le lien "Lire tout". Le lien "Lire tout" mène à une page consacrée entièrement à un poste: dans ce cas, le programme affiche tout l'article suivi de la liste des commentaires déjà publiés et du formulaire que les lecteurs peuvent utiliser pour envoyer un nouveau commentaire.

Hormis les contenus individuels, toutes les pages du Blog présentent une structure analogue qui prévoit une colonne, placée à droite, présentant des outils comme: la section avec les articles récents, les archives par mois ou catégories, les nuages. Selon vos exigences, vous pouvez personnaliser cette colonne et décider quels seront les outils disponibles et leur ordre de présentation.

Enfin, nous avons déjà dit qu'une des caractéristiques du Blog est de permettre au lecteur d'entrer un commentaire: ainsi en partant de l'article publié, une discussion peut s'ouvrir entre celui qui écrit et ceux qui lisent. Il est nécessaire de gérer les commentaires pour éviter les réponses vexantes ou non relatives au thème: pour ce faire, WebSite X5 met à votre disposition un Panneau de contrôle en ligne.

Pour créer un Blog, il suffit de définir certains paramètres généraux et de créer la liste des nouvelles à diffuser.

Le Blog étant défini, il faut maintenir vif l'intérêt des lecteurs en proposant régulièrement et fréquemment de nouveaux postes. À ce sujet, pour publier seulement les mises à jour relatives au Blog en phase d'exportation, sélectionnez l'option Exporter seulement le Blog et les Flux RSS dans la fenêtre Exportation du site sur Internet.

Les commandes nécessaires pour configurer un Blog et créer les articles sont présentées dans les sections suivantes: Articles, Mise en forme et Commentaires.

Cliquez pour etendre/reduire Référence: les commandes de la Section Articles

Les commandes de cette section permettent de définir certains paramètres généraux et de composer la liste des articles (ou Poste) à publier dans le Blog.

Le cadre Paramètres généraux comprend les options suivantes:

§Titre: dans ce champ, tapez le titre du Blog. Ce titre qui sera affiché dans la barre de titre du Navigateur est un paramètre important pour permettre aux utilisateurs et aux moteurs de recherche d'identifier correctement le Blog.
Si vous n'indiquez aucun titre pour le Blog, le programme lui affecte automatiquement le titre associé au site à travers l'option appropriée de la fenêtre Paramètres généraux | Générales.

§Description: dans ce champ, vous pouvez taper une brève description du Blog. La description du blog doit être succincte, efficace et précise: cette description sera en effet utilisée dans le code HTML comme contenu du Méta tag <description> et sera analysée par les spiders des moteurs de recherche.
Dans ce cas également, si vous n'indiquez aucune description pour le Blog, le programme lui affecte automatiquement la description associée au site à travers l'option appropriée de la fenêtre Paramètres généraux | Générales.

§Créer RSS Feed en incluant le contenu du Blog: cette option, activée par défaut, provoque la création automatique d'un Flux RSS avec tous les articles du Blog. Le chemin des Flux RSS du Blog est http://www.monsite.fr/blog/x5feed.xml où http://www.monsite.fr est l'URL du Site à laquelle il est lié.

Le cadre Liste des articles propose un tableau récapitulatif indiquant le Titre, l'Auteur, la Catégorie d'appartenance et Date de lancement de tous les Posts déjà insérés ainsi que les commandes nécessaires pour créer la liste des articles:

§Ajouter...: permet de rappeler la fenêtre Paramètres article pour entrer un nouvel article.

§Supprimer: permet de supprimer l'article sélectionné parmi ceux présents dans la Liste des articles.

§Modifier...: permet de rappeler la fenêtre Paramètres article pour modifier l'article sélectionné parmi ceux présents dans la Liste des articles.
Cliquez pour etendre/reduire Référence: les commandes de la Section Mise en forme

Les commandes de cette section permettent de définir certains aspects graphiques du Blog.

Le cadre Général comprend les options suivantes:

§Affichage des Articles: permet de définir comment doivent être affichés les Articles dans la première page du Blog. Il est possible de faire en sorte que seulement le premier article soit affiché entièrement et tous les autres en forme réduite, que tous soient entièrement affichés ou tous soient reduits. Les Articles affichés en forme réduite présentent seulement une brève description suivie du lien "Lire Tout".

§Afficher le bouton 'AddThis' pour partager les contenus sur Internet.: si vous sélectionnez cette option, le bouton "AddThis" apparaît automatiquement sous chaque article du Blog. En cliquant sur ce bouton, le lecteur affiche un sous-menu contenant une liste des Réseaux Sociales les plus connus: s'il dispose d'un profil sur l'un de ces circuits, il pourra le sélectionner et partager le lien vers le Poste avec ses contacts.

§Type de bouton: permet de définir l'aspect du bouton "AddThis" en choisissant parmi les propositions graphiques contenues dans la liste déroulante.

§Compte AddThis: permet, si vous disposez d'un Compte AddThis, de le spécifier. Avoir un compte permet d'afficher certaines statistiques sur l'utilisation du service AddThis par les lecteurs.

Pour plus d'informations sur le service AddThis et pour obtenir un compte, cliquez sur le bouton [image] et accédez au site officiel: www.addthis.com.

Le cadre Blocs latéraux propose un tableau récapitulatif indiquant le Titre, le Type et la Largeur de tous les blocs de contenu insérés dans la barre latérale ainsi que les commandes nécessaires pour créer la liste de ces blocs:

§Ajouter...: permet de rappeler la fenêtre Bloc latéral pour entrer un nouveau bloc.

§Dupliquer: permet de créer une copie du bloc sélectionné parmi ceux déjà insérés.

§Supprimer: permet de supprimer le bloc sélectionné parmi ceux présents dans la liste Blocs latéraux.

§En haut / En bas: permettent, respectivement, de déplacer le bloc sélectionné avant/après le bloc précédent/suivant parmi ceux déjà insérés dans la liste Blocs latéraux.

§Modifier...: permet de rappeler la fenêtre Bloc latéral pour modifier le bloc sélectionné parmi ceux présents dans la listeBlocs latéraux.
Cliquez pour etendre/reduire Référence: les commandes de la Section Commentaires

Les commandes de cette section permettent de gérer l'entrée des commentaires laissés par les visiteurs comme réaction aux articles publiés dans le Blog.

Tout d'abord il faut activer l'option Permettre l'entrée des commentaires pour les articles du blog pour permettre aux Visiteurs de laisser des commentaires aux Articles publiés dans le Blog.

Ceci fait, il faut spécifier le Type de contenu en choisissant entre:

Commenter et voter: les Visiteurs peuvent laisser des commentaires et, en plus, exprimer un vote.

Commentaire: les Visiteurs peuvent laisser des commentaires mais ne peuvent pas voter.

Voter: les Visiteurs peuvent voter mais ne peuvent pas laisser de commentaires.

Les options disponibles dans la section Paramètres des Commentaires sont:

§Mode d'affichage: définit si les commentaires laissés par les visiteurs peuvent être consultés en ligne immédiatement, ou si ils doivent d'abord être approuvées à l'aide des commandes du Panneau de contrôle en ligne.

§Ordre d'affichage: définit dans quel ordre chronologique doivent être affichés les commentaires publiés, du plus récent au plus ancien ou vice versa.

§Afficher le bouton 'Abus': permet de mettre à disposition des visiteurs le bouton "Abus" à travers laquel ils peuvent signaler tout comportement incorrect.

§Activer le contrôle anti-spam 'Captcha': ajoute le contrôle anti-spam du Captcha au terme du formulaire pour insérer un commentaire. A cet effet, il est insérée une image avec quelques lettres affichées d'une façon déformées sur un arrière-plan confus: le Visiteur doit recopier correctement les lettres dans un Champ spécifique afin de pouvoir envoyer le commentaire.

§Mode de vote: définit le style de l'élément graphique (par exemple, une série de 5 étoiles) proposé aux visiteurs pour leur permettre de voter. Il s'agit de la seule option disponible si vous sélectionnez Voter comme Type de contenu.

Dans la section Mode d'enregistrement des données il est possible de spécifier comment les données recupérées au moyen du formulaire à remplir pour publier un commentaire doivent être enregistrées et envoyées au gérant du site:

§Répertoire du serveur où enregistrer les données: spécifie dans quel sous-dossier, ou dans le dossier sur le serveur avec accès en écriture via PHP, les données doivent être sauvegardées. Le dossier sur le serveur principal est déjà spécifié par l'option Dossier du serveur avec l'accès en écriture présente dans la fenêtre Gestion des données. Si vous ne spécifiez pas de sous-dossier, les données sont directement enregistrées dans le dossier sur le serveur principal.

§Envoyer un e-mail pour notifier que le commentaire a été reçu: cette option permet d'envoyer automatiquement une notification par e-mail lorsque de nouvelles données sont reçues.

§Destination adresse e-mail: spécifie l'adresse à laquelle envoyer la notification par e-mail de la réception des données.

Habituellement les fournisseurs d'accès Internet permettent l'accès en écriture pour chaque dossier du serveur: dans ce cas, il n'est pas nécessaire de renseigner un chemin pour le dossier public. Au contraire, pour connaître le chemin complet du dossier public, il est nécessaire de contacter son fournisseur d'accès Internet.

À travers la section WebSite Test du Panneau de Contrôle en ligne il est possible de vérifier si le dossier avec accès en écriture spécifié, et si les éventuels sous dossiers contenus, existent et, dans ce cas, s'ils permettent réellement l'écriture des données.

En créant un Blog, la Page Spéciale "Blog" est automatiquement affichée sur le Plan du site: il est possible de la sélectionner et rappeler la fenêtre Propriétés de page pour définir les propriétés principales.

Ajouter le contrôle anti-spam du Captcha au terme du formulaire pour insérer un commentaire. En effet, une image est insérée avec quelques lettres affichée de façon déformée sur un arrière-plan confus: le Visiteur doit recopier correctement les lettres dans un Champ spécifique afin de pouvoir envoyer le commentaire.

Bonnes pratiques:

-

Comment gérer les commentaires des Blog et Livre d'Or du panneau de contrôle en ligne

Approfondissements:

-

Panneau de Contrôle en ligne


Fenêtre Paramètres article

Blog | Paramètres article

Étape 4 - Paramètres avancés > Blog >

Blog | Paramètres article

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtre Paramètres article, rappelée par la commande Ajouter... ou la commande Modifier... présents dans la fenêtre Blog | Articles, permet de créer et modifier un Article du Blog.

Cette fenêtre présente deux sections et elle est organisée dans le sections suivantes: Générales et Avancées.

Cliquez pour etendre/reduire Référence: les commandes de la Section Générales

Les commandes présentes dans cette section sont:

§Titre: spécifie le titre de l'Article.

§Date de publication: fixe la date de publication de l'article en la sélectionnant au moyen d'un calendrier spécifique.

§Auteur: permet d'indiquer l'auteur de l'article. Dans ce champ, vous pouvez taper directement le nom de l'auteur, ou ouvrir la liste déroulante et sélectionner un nom parmi ceux insérés précédemment.

§Catégorie: permet d'indiquer la catégorie de l'article. Comme pour le champ Auteur, vous pouvez taper le nom d'une nouvelle catégorie, ou sélectionner l'une des catégories insérées précédemment.

§Balise: permet d'indiquer une liste de balises, à savoir de brèves descriptions des concepts clé associés à l'article. Vous pouvez associer plusieurs balises à chaque article, en les écrivant l'une après l'autre, séparées par une virgule (par exemple: " tag1, tag2, tag3., ...").

§Contenu: permet d'écrire l'article en utilisant un éditeur analogue à celui disponible pour l'Objet Texte.

§Brève description: permet d'indiquer une brève description à associer à l'article.
Cliquez pour etendre/reduire Référence: les commandes de la Section Avancées

Les commandes présentes dans cette section sont:

§Audio/Vidéo lié: permet d'indiquer un fichier audio (au format .MP3, .WMA, .WAV, .MID, .AIF, .M4A) ou un fichier vidéo (au format .MP4, .FLV, .AVI, .WMV, .MPG, .MOV) à associer à l'article. Cette option permet de créer automatiquement un lien vers un fichier audio/vidéo affiché au bas de l'article.

Vous pouvez faire en sorte que la vidéo soit directement affichée dans l'article en insérant manuellement le code HTML nécessaire dans l'éditeur de texte lors de la composition de l'article.

Par exemple, vous pouvez copier le code d'une vidéo YouTube™ tel qu'il est fourni par le portail et le coller à l'intérieur de l'article.

§Poster sources: permet de créer la liste des sources utilisées pour composer l'article à l'aide des commandes suivantes:

-Ajouter... / Supprimer: permettent respectivement d'ajouter une nouvelle source ou de supprimer celle sélectionnée.

-En haut / En bas: permettent de ranger la liste des sources, en déplaçant vers le haut ou le bas celle sélectionnée.

-Modifier: permet de modifier l'élément sélectionné. Il est aussi possible de cliquer une deuxième fois sur un élément déjà sélectionné pour le modifier. Pour insérer correctement une source, il faut écrire le nom du site suivi de l'URL comprise entre les caractères < > (par exemple: "WebSite X5 < http://www.websitex5.com>"): comme source sera affiché seulement le texte et l'URL sera utilisée pour créer le lien associé.

§Ne pas habiliter les commentaires pour cet article: si vous sélectionnez cette option, vous empêchez les utilisateurs de laisser des commentaires pour l'article courant.

Bonnes pratiques:

-

Comment gérer les commentaires du Blog et Livre d'Or à partir du Panneau de Contrôle en ligne

Approfondissements:

-

Panneau de Contrôle en ligne


Fenêtre Bloc latéral

Blog | Bloc latéral

Étape 4 - Paramètres avancés > Blog >

Blog | Bloc latéral

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtre Bloc latéral, rappelée par la commande Ajouter et par la commande Modifier présentes dans la fenêtre Blog | Mise en forme, permet de procéder à la définition des Blocs de contenu qu'on souhaite rendre disponibles dans la colonne latérale de toutes les pages du Blog.

Cette fenêtre présente les sections suivantes: Général e Style.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les commandes présentes dans cette section permettent de créer la liste des Blocs qui devront compléter la page du Blog.

Vous pouvez choisir parmi les types de bloc suivants:

Articles récents: Bloc où sont affichés tous les Postes les plus récents publiés sur le Blog. Si vous cliquez sur le titre, vous accédez à la page affichant l'article

Catégories: bloc où est affichée la liste de toutes les catégories composant les Postes du Blog. Si vous cliquez sur une catégorie, vous affichez la liste des articles insérés.

Articles mensuels: bloc où est indiquée la liste des Postes publiés, organisés par mois.

Nuages: bloc où est indiquée la liste de toutes les catégories ou de toutes les balises associées aux articles publiés. Dans ce cas, les noms des catégories ou les balises sont affichés avec des dimensions différentes selon le nombre de Postes reliés: plus le nombre de Postes reliés est grand, plus les dimensions de l'inscription sont grandes. Si vous cliquez sur une rubrique (Catégorie ou balise), vous affichez la liste des articles qui y sont reliés.

Blogoliste: bloc d'affichage de la liste du Blogoliste, à savoir d'autres sites Web ou Blogs que vous voulez lier pour suggérer leur visite à vos lecteurs.

Facebook: bloc qui exploite le Social Plug-in "Like Box" de Facebook pour permettre aux utilisateurs de:

·voir à combien de personnes et/ou propres amis la page Facebook proposée plaît;

·lire les Posts récents publiés sur la page Facebook proposée;

·dire que la page Facebook proposée plaît sans devoir par force la visiter.

Google AdSense Adverts: bloc d'affichage des messages publicitaires fournis par le circuit Google AdSense™.

Code HTML: bloc complètement personnalisable qui peut être utilisé pour insérer n'importe quelle fonction non prévue en mode automatique par le programme.

Selon le type de bloc sélectionné, le programme présente différentes options sur lesquelles vous pouvez agir.

Les options communes à tous les blocs sont:

§Titre: permet d'insérer le titre à associer et afficher pour le bloc.

§Largeur: permet de définir la largeur en pixels du bloc.

En plus des options communes, pour chaque type de bloc, vous disposez des options spécifiques suivantes:

Articles récents / Catégories /

Articles mensuels:

§Nombre maximum d'éléments: permet d'indiquer le nombre maximum d'éléments qui doit être affiché à l'intérieur du bloc.

Nuages:

§Afficher les Catégories dans un nuage / Afficher les Balises dans un nuage: permettent de choisir si dans le bloc Nuages, il faut indiquer les Catégories ou les Balises utilisées pour les articles déjà publiés.

Blogoliste:

§Blogoliste: permet de composer la liste du Blogoliste à travers les commandes suivantes:

-Ajouter / Supprimer: permettent, respectivement, d'ajouter un nouveau Blogoliste ou de supprimer un site sélectionné.

-En haut / En bas: permettent de ranger la liste des Blogoliste, en déplaçant vers le haut ou le bas l'élément sélectionné.

-Modifier: permet de modifier l'élément sélectionné. Il est aussi possible de cliquer une deuxième fois sur un élément déjà sélectionné pour le modifier.

Pour insérer correctement un Blogoliste, il faut écrire le nom du site suivi de l'URL comprise entre les caractères < > (par exemple: "WebSite X5 < http://www.websitex5.com>"): seulement le texte sera affiché comme Blogoliste et l'URL sera utilisée pour créer le lien associé.

Facebook:

§URL Facebook: permet d'indiquer l'URL de la page Facebook que vous voulez proposer.

§Couleur d'arrière-plan: permet de définir un Arrière-plan Clair ou Foncé pour le bloc.

§Hauteur: permet de définir la hauteur en pixels du bloc.

§Afficher les connexions: si vous sélectionnez cette option, le bloc montre aussi les photos des profils des amis (à savoir des connexions).

§Afficher flux: si vous sélectionnez cette option, les derniers Posts publiés dans le tableau de la page Facebook proposée sont automatiquement affichés dans le bloc.

§Afficher en-tête FaceBook: si vous sélectionnez cette option, une en-tête de Facebook est affichée dans le bloc.

Google AdSense Adverts:

§Code HTML Google AdSense: permet de saisir le code HTML fourni par Google AdSense™ pour afficher un bloc de messages publicitaires.

Code HTML:

§Code HTML: permet de saisir le code HTML pour créer un bloc complètement personnalisé.
Cliquez pour etendre/reduire Référence: les commandes de la Section Style

À travers les commandes présentes dans cette section vous pouvez définir l'aspect graphique des Blocs de contenu qui complètent la Page du Blog.

Les options présentes dans le cadre Texte sont:

§Police: spécifie le type de Police, le Style et la taille du texte.

§Couleur de texte: permet d'indiquer la couleur à utiliser pour le texte.

§Marge: permet de définir la valeur en pixel pour la marge, à savoir l'espace entre le bord du Bloc et le texte qui est contenu.

Dans le cadre Arrière-plan , au contraire, sont disponibles les options suivantes:

§Couleur d'arrière-plan: spécifie la couleur à utiliser comme remplissage d'arrière-plan.

§Fichier image: sélectionner le fichier graphique (.JPG, .GIF, .PNG.) relatif à l'image à utiliser comme arrière-plan.

§Disposition: permet d'indiquer si l'image insérée comme arrière-plan doit être répétée ou non. L'image peut être répétée horizontalement, verticalement ou dans les deux sens pour remplir tout l'espace disponible. En plus, il est possible de faire en sorte que l'image soit adaptée, autrement redimensionnée de façon à couvrir tout l'arrière-plan.

§Alignement: permet d'indiquer comment doit être alignée l'image insérée comme arrière-plan en rapport au Bloc.

Enfin, dans le cadre Bordure, au contraire, sont disponibles les options suivantes:

§Epaisseur: spécifie l'épaisseur des bords, du bloc menu.

§Couleur: spécifie la couleur des bords, du bloc menu.

§Coins arrondis: définit le facteur d'arrondissement des angles, du bloc menu.

§Ombre: applique une ombre, définissant la couleur, la position, la diffusion et la taille.

Bonnes pratiques:

-

Comment gérer les commentaires du Blog et Livre d'Or à partir du Panneau de Contrôle en ligne

Approfondissements:

-

Panneau de Contrôle en ligne


Flux RSS

Étape 4 - Paramètres avancés >

Flux RSS

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre propose les outils et les options nécessaires pour créer un Flux RSS, l'un des formats les plus populaires pour la distribution de contenus Web.

Le Flux RSS est un outil très polyvalent, utile pour diffuser des nouvelles, des images ou des vidéos: il est très utile quand on a beaucoup de nouvelles à proposer avec une certaine fréquence ou quand on veut signaler des événements, des mises à jour effectuées à l'intérieur du site, les nouveaux posts ou les commentaires publiés sur un blog.

En souscrivant au le Flux RSS associé au site web, les utilisateurs pourront être constamment à jour et recevoir/lire les nouvelles directement grâce à leur programme d'agrégateur de nouvelles.

Cliquez pour etendre/reduire Référence: les commandes pour mettre en place un Flux RSS

Pour créer un Flux RSS , il suffit de définir certains paramètres généraux et de créer la liste des nouvelles à diffuser.

Le cadre Liste des articles propose un tableau récapitulatif indiquant le Titre et la Date de lancement de toutes les nouvelles déjà insérées ainsi que les commandes nécessaires pour créer la liste des articles:

§Ajouter...: permet d'appeler la fenêtre Paramètres article pour entrer un nouvel article.

§Supprimer: permet de supprimer l'article sélectionné parmi ceux présents dans la Liste des articles.

§Modifier...: permet d'appeler la fenêtre Paramètres article pour modifier l'article sélectionné parmi ceux présents dans la 'Liste des articles.

En plus de créer la liste des nouvelles, vous devez définir les paramètres suivants inclus dans le cadre Paramètres généraux:

§Titre: (paramètre obligatoire) permet d'indiquer le titre du Flux RSS lié au site Web.

§Image: permet d'insérer une image (fichier au format .JPG, .GIF, .PNG) à associer au Flux RSS; cette image (le logo de l'entreprise ou du site web) sera affichée par le agrégateur de nouvelles.

§Description: (paramètre obligatoire) demande d'indiquer une description du Flux RSS relié au site web.

Lorsque vous testez le fonctionnement du Site créé localement, une fenêtre d'avertissement prévient que les Flux RSS apparaîtront seulement quand le site Web aura été publié sur Internet.


Fenêtre Paramètres article

Flux RSS | Paramètres article

Étape 4 - Paramètres avancés > Flux RSS >

Flux RSS | Paramètres article

 Return to chapter overview

La fenêtre Paramètres article, appelée par la commande Ajouter... ou par la commande Modifier... présente dans la fenêtre Flux RSS, permet de créer et modifier un Article du Flux RSS.

§Titre: spécifie le titre de l'Article.

§Date de publication: fixe la date de publication de l'article en la sélectionnant au moyen d'un calendrier spécifique.

§Contenu: permet d'écrire l'article en utilisant un éditeur analogue à celui disponible pour l'Objet Texte.

§Page liée: permet d'accéder au Plan du Site pour définir quelle Page doit être liée à l'Article.


Gestion des données

Étape 4 - Paramètres avancés >

Gestion des données

 Return to chapter overview
Montrer/Cacher le texte caché

Dans cette fenêtre vous pouvez définir les méthodes de gestion des données récupérées à travers les éléments du Site Web comme les Formulaires d'Envoi E-mail, le Blog, le Livre d'Or.

À travers les commandes de la section Base de données il est possible de créer la liste des Bases de données liées au Projet du Site Web sur lequel on travaille, afin de pouvoir les gérer de façon plus facile. Toutes les Bases de données insérées sont affichées dans un tableau récapitulatif qui, pour chacune d'elles, montre Description, Nom de la base de données, Nom d'hôte et Nom utilisateur.

Cliquez pour etendre/reduire Référence: les commandes pour composer la liste des Bases de données

Les commandes pour composer la liste des Bases de données liées au Projet courant sont:

§Ajouter...: rappelle la fenêtre Paramètres de la base de données pour procéder à l'insertion d'une nouvelle Base de données.

§Supprimer: supprime la Base de données sélectionnée de la liste.

§Modifier...: rappelle la fenêtre Paramètres de la base de données pour modifier les données de la Base sélectionnée. Cette modification est possible aussi en double cliquant sur la Base de données.

Il est nécessaire de créer la liste des Bases de données liées au Projet avant de pouvoir utiliser une Base de données pour l'envoi des données récupérées avec un Objet Formulaire d'envoi d'email.
Cliquez pour etendre/reduire Référence: les options pour l'envoi des e-mail et la sauvegarde sur Serveur

Les options de la section Envoyer un e-mail permettent d'intervenir sur les méthodes utilisées pour l'envoi des e-mail:

§Type de script du formulaire de courriel: permet de choisir le script à utiliser pour envoyer l'e-mail géré par WebSite X5 en relation, par exemple, à l'utilisation de l'Objet Formulaire d'envoi d'e-mail ou à la création d'un Panier e-commerce. Par défaut, le programme utilise le Script complet: si ce script ne fonctionne pas à cause des configurations du serveur utilisé, il est conseillé d'essayer de le remplacer et de définir les options Script serveur de basse qualité ou Script à bas niveau.

§Soumission des données du formulaire de courriel: permet de choisir la méthode d'envoi des données à utiliser pour envoyer des données de l'Objet Formulaire d'envoi d'e-mail. Par défaut, le programme utilise la méthode POST mais, comme certains serveur pourraient ne pas être définis correctement pour le supporter, vous pouvez choisir d'utiliser la méthode GET.

Vous savez que le protocole HTTP (Hypertext transfert Protocol) est utilisé comme système principal pour la transmission d'informations sur le Web. Ce protocole fonctionne selon un mécanisme de question/réponse où le Client pose une question et le serveur donne une réponse. En général, le Client correspond au navigateur et le serveur au site web.

Les messages HTTP de question/réponse ont, bien évidemment, leur propre syntaxe. Notamment, dans les messages de question, il faut indiquer une méthode et, parmi celles disponibles, les plus courantes sont GET et POST.

La méthode GET est utilisée pour obtenir le contenu de la ressource indiquée comme objet de la question (par exemple la page web voulue).

La méthode POST, en revanche, est utilisée en général pour envoyer des informations au serveur (par exemple les données d'un formulaire).

Donc, dans le cas spécifique du formulaire e-mail, la méthode POST est la plus appropriée mais, quand elle n'est pas supportée par le serveur, WebSite X5 permet d'utiliser la méthode GET.

Enfin, il est possible définir le Dossier avec accès en écriture:

§Dossier du serveur avec l'accès en écriture: dans ce champ il est nécessaire de préciser le chemin sur le Serveur du dossier avec accès en écriture, à savoir du dossier dans lequel est possible l'écriture du code PHP.

Habituellement les fournisseurs d'accès Internet permettent l'accès en écriture pour chaque dossier du serveur: dans ce cas, il n'est pas nécessaire de renseigner un chemin pour le dossier public. Au contraire, pour connaître le chemin complet du dossier public, il est nécessaire de contacter son fournisseur d'accès Internet.

À travers la section WebSite Test du Panneau de Contrôle en ligne il est possible de vérifier si le dossier avec accès en écriture spécifié, et si les éventuels sous dossiers contenus, existent et, dans ce cas, s'ils permettent réellement l'écriture des données.


Fenêtre Paramètres de la base de données

Paramètres de la base de données

Étape 4 - Paramètres avancés > Gestion des données >

Paramètres de la base de données

 Return to chapter overview

Cette fenêtre, rappelée par la commande Ajouter... présente dans la fenêtre Gestion des données, permet de définir les paramètres relatifs à la nouvelle Base de données liée au Projet en cours.

Les Paramètres de la base de données à définir sont:

§Description: c'est un nom qui peut être assigné librement à la Base de données de façon à l'identifier plus facilement.

§Nom d'hôte : c'est l'adresse URL du serveur MySQL où se trouve la Base de données en ligne qu'on souhaite utiliser. Dans la plus part des cas, la Base de données se trouve sur le même serveur où se trouve le Site Web auquel elle est liée et donc peut être identifié comme "localhost". En tout cas il faut vérifier avec son fournisseur d'accès Internet.

§Nom de la base de données : dans ce champ vous devez insérer le nom de la Base de données que vous voulez utiliser (information fournie par le fournisseur d'accès Internet).

§Nom utilisateur: dans ce champ vous devez insérer l'utilisateur pour accéder à la Base de données (information fournie par le fournisseur d'accès Internet).

§Mot de passe: dans ce champ vous devez insérer le mot de passe pour accéder à la Base de données (information fournie par le fournisseur d'accès Internet).


Gestion de l'accès

Étape 4 - Paramètres avancés >

Gestion de l'accès

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre contient les commandes permettant de créer et gérer des profils utilisateurs pouvant accéder à la Zone Réservée du site, à savoir les pages qui ont été définies comme Protégées pendant la phase de Création du plan.

Cliquez pour etendre/reduire Référence: les commandes pour créer les Profiles Utilisateur

Le cadre Groupes et Utilisateurs qui peuvent accéder aux pages protégées propose un tableau récapitulatif indiquant le Groupes/Utilisateurs déjà insérés, le Login et les Remarques affectées à chaque utilisateur.

En regard du tableau se trouvent les commandes permettant de créer la liste des groupes et des utilisateurs autorisés à accéder aux pages protégées du site:

§Nouveau groupe: permet d'insérer un nouveau Groupe, de sorte à organiser les utilisateurs en catégories homogènes plus faciles à gérer. Les groupes n'ont pas de paramétrages particuliers: ce sont de simples "récipients" qui sont insérés directement dans le tableau récapitulatif. Pour renommer un groupe déjà inséré, double-cliquez sur celui-ci.
Pour mieux organiser l'accès des utilisateurs, vous pouvez créer des sous-groupes: vous pouvez former autant de groupes et sous-groupes que vous le souhaitez.
Deux groupes sont présents par défaut: Administrateur et Utilisateurs. Le groupe Administrateur est formé des administrateurs du site qui ont automatiquement accès à toutes les Pages protégées du site.

En saisissant leur Nom utilisateur et Mot de passe, tous les utilisateurs du groupe Administrateur peuvent accéder au Panneau de contrôle en ligne (disponible à l'URLhttp://www.monsite.fr/admin où http://www.monsite.fr est l'URL du site) permettant de gérer les commentaires aux articles du Blog, les messages du Livre d'Or et afficher les informations de diagnostic.

§Nouvel utilisateur: permet de rappeler la fenêtre Paramètres utilisateur pour insérer dans le groupe sélectionné un nouvel utilisateur avec ses données d'accès.

§Créer Alias: permet de créer un Alias pour l'utilisateur sélectionné. Cette option est utile quand il faut insérer le même utilisateur dans différents groupes pour l'autoriser à accéder à différentes pages protégées, elle n'est pas active pour les utilisateurs du groupe Administrateur qui ont automatiquement accès à toutes les pages protégées. L'alias reste lié à l'utilisateur de sorte que toute modification effectuée à l'un est automatiquement appliquée à l'autre. Pour créer rapidement un alias, vous pouvez également sélectionner un utilisateur, le faire glisser et, appuyer sur la touche CTRL, avant de le relâcher dans le groupe.

§Supprimer: permet de supprimer le groupe ou l'utilisateur sélectionné parmi ceux déjà insérés. Vous ne pouvez supprimer ni le Groupe Administrateurs ni l'utilisateur Admin de ce groupe car ils sont prévus par défaut.

§Modifier...: permet de rappeler la fenêtre Paramètres utilisateur pour modifier les paramétrages de l'utilisateur sélectionné.

Après avoir créé les utilisateurs avec les données d'accès relatives et les avoir organisés en groupes, vous pouvez revenir à l'étape 2 - Création du plan pour définir les pages qui doivent être protégées et établir le droit d'accès des Groupes/Utilisateurs pour chaque Page protégée.
Cliquez pour etendre/reduire Référence: les options pour gérer l'accès

Autre le Tableau récapitulatif, dans le cadre Paramètres de la page Nom d'utilisateur et Mot de passe sont disponibles les options suivantes:

§Message de bienvenue: permet d'écrire le texte qui s'affichera quand l'utilisateur essaiera d'accéder à une page protégée sans avoir préalablement exécuté la connexion. Dans ce cas, l'utilisateur est adressé vers une page, créée automatiquement par le programme, composée des éléments suivants:

-le message de bienvenue spécifié;

-les champs d'entrée du Nom Utilisateur et du Mot de passe;

-le bouton Enregistrez-vous, si vous avez sélectionné l'option Page d'inscription (voir ci-dessous).

§Page d'inscription: permet d'accéder au plan du site pour indiquer la page à afficher quand l'utilisateur clique sur Enregistrez-vous pour demander le Nom Utilisateur et le Mot de passe nécessaires pour accéder aux Pages protégées.

Si vous définissez même une seule Page comme Protégée (donc en activant une Zone Réservée), vous affichez automatiquement sur le Plan du site la Page Spéciale "Page de connexion": vous pouvez la sélectionner et rappeler la fenêtre Propriétés de page pour définir les propriétés principales.

Quand vous testez en local le fonctionnement du site créé, une fenêtre d'avertissement vous informe que les pages protégées seront affichées sans la demande d'accès. Les pages protégées sont activées seulement après la publication du Site sur le serveur.

Pour que la zone réservée fonctionne correctement, il est nécessaire que le serveur accueillant le site supporte le langage de programmation PHP et les sessions. La section WebSite Test du Panneau de contrôle en ligne donne des informations de diagnostic sur le serveur.

Approfondissements:

-

Le Panneau de Contrôle en ligne


Fenêtre Paramètres utilisateur

Paramètres utilisateur

Étape 4 - Paramètres avancés > Gestion de l'accès >

Paramètres utilisateur

 Return to chapter overview

La fenêtre Paramètres utilisateur, rappelée avec la commande Nouvel utilisateur ou Modifier... de la fenêtre Gestion de l'accès, permet de définir le Nom Utilisateur et le Mot de passe pour le nouvel utilisateur.

Voici les commandes disponibles pour créer un nouvel utilisateur:

§Prénom et nom: permet d'indiquer le nom de l'utilisateur auquel vous voulez accorder l'accès à certaines Pages protégées du site.

§Nom utilisateur / Mot de passe: permettent d'indiquer le nom utilisateur et le mot de passe que l'utilisateur devra saisir pour pouvoir afficher les Pages protégées auxquelles il a le droit d'accès. Le programme propose automatiquement un mot de passe composé de 8 caractères (lettres et chiffres) choisis à travers une procédure aléatoire: vous pouvez toutefois modifier librement ce mot de passe.

§Page d'accès: permet d'accéder au plan du site pour indiquer la page à afficher quand l'utilisateur a saisi ses données d'accès.

§Remarque: permet d'insérer certaines remarques facultatives sur l'utilisateur.

§Date d'inscription: permet d'insérer, à l'aide de la fenêtre Calendrier, la date d'inscription de l'utilisateur.

Les informations relatives aux options Remarque et Date d'inscription ne sont pas comprises dans le code du site web réalisé: elles servent seulement à améliorer la gestion des utilisateurs de la part de l'administrateur du site.


Panier virtuel e-commerce

Étape 4 - Paramètres avancés >

Panier virtuel e-commerce

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre propose les outils et les options nécessaires pour créer et gérer un panier e-commerce permettant d'effectuer la vente en ligne des produits offerts sur le site web.

Pour créer un panier e-commerce, il faut tout d'abord définir le catalogue des produits disponibles en les organisant par catégories et sous-catégorie homogènes. Pour chaque produit il faut bien évidemment insérer une série d'informations indispensables comme le nom, la description et le prix mais vous pouvez aussi associer une ou plusieurs images et prévoir des variantes (de taille, de couleur, de modèle , etc. ). Le catalogue étant créé, vous devez définir les méthodes d'expédition et de paiement à activer et définir le bon de commande en configurant aussi les e-mails qui seront envoyés par le panier aussi bien au gérant du site qu'à la personne qui passe la commande.

Dans le détail, les différentes options pour définir les éléments et le fonctionnement du panier e-commerce sont présentées dans les sections suivantes: Produits, Gestion des commandes, Détails client, Envoyer la commande et Options.

Cliquez pour etendre/reduire Référence: les commandes de la Section Produits

Les options de la section Produits de la fenêtre Panier virtuel e-commerce permettent d'entrer des produits dans le panier, en les organisant par catégories

Les produits déjà insérés sont affichés dans le tableau récapitulatif qui indique, pour toutes les catégories prévues, tous les produits insérés avec leur Description et Prix.

Le tableau récapitulatif présente une barre d'outils supérieure contenant les commandes suivantes:

Couper [CTRL+X] - Copier [CTRL+C] - Coller [CTRL+V]

Elle permettent, respectivement, de couper, copier et coller les produits sélectionnés. Ces commandes sont aussi disponibles dans le menu Popup rappelé à l'aide d'un clic droit de la souris en pointant la liste des produits.

Etendre / Réduire

Étendent ou contractent la catégorie sélectionnée pour afficher ou non les produits qu'elle contient.

Importer les produits

Permet d'importer la liste des produits devant être inclus dans le panier directement à partir d'un fichier externe (fichier TXT ou CSV à partir de Microsoft Excel).

Exporter les produits

Exporte le catalogue des produits en un fichier .TXT ou .CSV.

Pour plus d'informations sur les fonctions Importer les produits/Exporter les produits et sur comment créer et gérer les fichiers avec le catalogue des Produits, voir: Comment importer/exporter les Produits du Panier.

En plus de la barre d'outils, pour définir la liste des Produits à gérer à travers le panier en ligne, vous disposez des commandes:

§Nouvelle catégorie: permet d'entrer une nouvelle catégorie pour organiser les produits disponibles. Les catégories n'ont pas de paramétrages particuliers: ce sont de simples "récipients" qui sont insérés directement dans le tableau récapitulatif. Pour renommer une catégorie déjà insérée, double-cliquez sur son nom.
Pour mieux organiser le catalogue des produits, vous pouvez aussi créer des sous-catégories: vous pouvez former autant de catégories et sous-catégories que vous le souhaitez.

§Nouveau produit: permet de rappeler la fenêtre Paramètres de produit pour entrer un nouveau produit dans la catégorie sélectionnée.

§Supprimer: permet de supprimer la catégorie sélectionnée, avec tous les produits qu'elle contient, ou seulement les produits sélectionnés.

§Modifier...: permet de rappeler la fenêtre Paramètres de produit pour modifier les paramétrages du produit sélectionné.

Pour déplacer un produit d'une catégorie à l'autre, vous pouvez agir directement sur la liste des produits: sélectionnez le produit , faites-le glisser et relâchez-le à l'endroit voulu (Drag&Drop). Vous pouvez sélectionner plusieurs produits à l'aide des touches CTRL et SHIFT.

Après avoir inséré les catégories et les produits relatifs dans le panier virtuel e-commerce, vous pouvez utiliser l'Objet Liste des produits pour créer un véritable catalogue en ligne.
Cliquez pour etendre/reduire Référence: les commandes de la Section Gestion des commandes

À travers les commandes de cette section vous pouvez définir les méthodes d'expédition et de paiement que vous voulez rendre disponibles pour le Panier.

Dans le cadre Liste de types de livraison vous trouvez tous les méthodes d'expédition introduits, en signalant pour chacune le Nom, la Description et le Coût associé.

Voici les commandes disponibles pour créer la liste des types d'expédition activés pour le panier:

§Ajouter...: permet de rappeler la fenêtre Type de livraison pour définir un nouveau type d'expédition.

§Dupliquer: permet de créer une copie du type d'expédition sélectionné pour définir plus rapidement un autre type à rendre disponible.

§Supprimer: permet de supprimer le type d'expédition sélectionné.

§En haut / En bas: permettent, respectivement, de déplacer le type d'expédition sélectionné avant ou après le type précédent/suivant.

§Modifier...: permet de rappeler la fenêtre Type de livraison pour modifier le type d'expédition sélectionné. Pour ce faire, vous pouvez aussi double-cliquer sur le type.

De même, le cadre Liste de types de paiement montre tous les types de paiement disponibles sur le panier et indique pour chacun d'entre eux le Nom, la Description et le Coût associés.

Les commandes disponibles pour créer la liste des types de paiement sont identiques à celles illustrées pour les types d'expédition mais les boutons Ajouter... et Modifier... rappellent la fenêtre Type de paiement.
Cliquez pour etendre/reduire Référence: les commandes de la Section Détails client

Les commandes de cette section vous permettent de composer le formulaire que le Client doit remplir pour procéder à la commande à travers le Panier.

Le cadre Bon de commande offre une Liste des champs que vous pouvez utiliser pour composer le bon de commande: il existe des champs Présélections et des champs Personnalisé et pour chaque champ il est spécifié s'il est Visible et/ou Obligatoire.

Les commandes de la barre présente au dessus de la Liste des champs permettent de:

Ajouter un champ personnalisé

Ajoute au formulaire un nouveau champ, en l'insérant entre ceux Personnalisé.

Supprimer un champ

Supprime du formulaire le champ sélectionné. Il n'est pas possible de supprimer les champs Présélections.

Renommer Champ

Modifie le nom du champ sélectionné. Il n'est pas possible de renommer les champs Présélections.

En haut / En bas

Ils agissent sur l'ordre d'affichage des champs déjà insérés, en déplaçant vers le haut ou vers le bas celui sélectionné. Vous pouvez modifier l'ordre des champs Présélections et des champs Personnalisé, mais vous ne pouvez pas déplacer les champs Personnalisé parmi ceux Présélections ou vice-versa.

Champ visible

Définit le champ sélectionné comme Visible ou non dans le formulaire.

Champ obligatoire

Définit le champ sélectionné comme Obligatoire ou non dans le formulaire. Le client doit remplir tous les champs obligatoires pour pouvoir valider la commande.

La liste proposée par défaut prévoit déjà tous les champs généralement utilisés dans un formulaire d'inscription.

Le dernier champ proposé dans la liste est le champ e-mail: vous ne pouvez pas rendre invisible ce champ ou non obligatoire car il est nécessaire de connaître l'e-mail de l'utilisateur qui envoie la commande pour le bon fonctionnement du Panier.

Au bas du tableau relatif à la Liste des champs vous disposez de l'option suivante:

§Afficher le formulaire des données d'expédition: permet d'ajouter automatiquement au formulaire une section avec les champs nécessaires pour collecter les données d'expédition, dans le cas où elles seraient différentes de celles pour la facturation.

Autre que les champs nécessaires pour collecter les données pour la facturation et l'expédition des Produits, selon la Loi les fomulaires pour la commande doivent présenter aussi les conditions de vente qui règlent le fonctionnement du Panier afin de permettre aux Clients de les lire et de les accepter explicitement.

Dans la section Conditions Générales de Vente est disponible un éditeur de texte qui permet de composer le Texte des Conditions Générales de Vente. Dans l'éditeur est déjà présente une phrase standard dans laquelle on peut insérer les liens (à travers le bouton [image]) pour ouvrir, par exemple, les fichiers .PDF qui expliquent les Politiques de confidentialité et de remboursement. Vous pouvez toujours écrire un texte différent et le formuler de la manière que vous jugerez la plus appropriée.

Bien que, conformément à la législation en vigueur il suffit que les Conditions Générales de Vente soient mentionnées peu avant le bouton "Acheter" à travers lequel un ordre est envoyé, vous pouvez également activer l'option:

§Demander d'accepter les Conditions Générales de Vente: ajoute à la fin du formulaire, juste avant le bouton "Acheter" , la demande d'accepter clairement les Conditions Générales de Vente affichées, en cliquant pour faire apparaître la coche dans la case à cocher.
Cliquez pour etendre/reduire Référence: les commandes de la Section Envoyer la commande

Les commandes de cette section permettent de définir les modalités relatives à l'envoi des données collectées à travers le Formulaire créé.

À travers les commandes de cette section vous pouvez définir les modalité relatives à l'envoi des données récoltées par le Bon de Commande du Panier en ligne, autre que les textes de l'e-mail de confirmation qui est automatiquement envoyé au Client.

Dans la section Envoyer la commande il est possible spécifier comment les données récoltées par le Bon de commande peuvent être enregistrées et envoyées à l'administrateur du Site:

§Adresse e-mail où recevoir les commandes: permet d' indiquer l' adresse e-mail où envoyer les données collectées à travers le Bon créé. Il est possible d'insérer plus d'un e-mail : vous devez taper toutes les adresses e-mail séparées par point-virgule (;).

§Joindre les données dans le format CSV: permet de s'assurer que les données collectées peuvent également être enregistrés dans un fichier au format CSV, comme pièce jointe de l'e-mail envoyé. Dans un fichier CSV les données sont présentées sous forme de texte, comme une longue liste d'éléments séparés par un point-virgule (;): ces fichiers peuvent être facilement importés dans les programmes pour la gestion des feuilles de calcul (par exemple, Microsoft Excel).

Enfin, dans le cadre Courriel de confirmation de la commande utilisateur sont disponibles des champs où il est possible d'éditer le Texte d'en-tête et le Texte de pied de page du e-mail de confirmation de Commande qui sera automatiquement envoyé au Client. Dans cette e-mail de confirmation de commande, autre que le texte d'introduction et le texte de fermeture sont aussi proposés les descriptions relatives aux méthodes d'expédition et paiement choisies.

Cliquez pour etendre/reduire Référence: les commandes de la Section Options

À travers les commandes de cette section vous pouvez définir certains paramètres graphiques, autres que relatifs à la devise et à la TVA, pour les Paniers e-commerce.

Dans le cadre Définition de la devise on vous présente les options suivantes:

§Devise: permet de définir la devise à utiliser dans le panier. Le menu Popup propose déjà certaines devises: pour modifier la composition de cette liste de devises, cliquez sur le bouton [image] qui rappelle la fenêtre Liste de devises..

§Groupement des chiffres: permet de choisir comment écrire le prix des produits, en choisissant si les milliers doivent être séparés par un point et les décimaux par une virgule (1.000,00) ou inversement (1,000.00).

§Afficher la devise à droite: si vous sélectionnez cette option, le symbole de la devise sera affiché à droite des prix.

§Afficher deux chiffres après la virgule: si vous sélectionnez cette option, les prix seront affichés avec deux chiffres après la virgule.

Le cadre Paramètres TVA comprend les options suivantes:

Type: permet de définir si pour tous les prix des Produits présents dans le Panier l'indication de la TVA n'est pas présente, si elle est incluse ou non incluse.

Valeur par défaut (%): permet d'indiquer une valeur de TVA par défaut pour tous les produits du panier, à l'exception de ceux pour qui a été définie une TVA particulière par l'option TVA (%) présente dans la fenêtre Paramètres de produit | Général.

Le cadre Options comprend les options suivantes:

§Autorise les commandes uniquement pour des quantités minimales: fait en sorte que la commande ne soit acceptée que si elle atteint le montant minimum établi.

§Montant total minimum: elle n'est disponible que si vous avez sélectionné l'option Autorise les commandes uniquement pour des quantités minimales, elle permet de définir la valeur du montant minimum qui doit être atteint par le total de la commande pour être acceptée.

Les commandes du cadre Options permettent de définir des tableaux qui récapitulent les produits disponibles et/ou insérés dans le Panier:

§Arrière-plan d'en-tête / Texte d'en-tête / Arrière-plan des cellules / Texte des cellules / Bordure de tableau: permet de définir la couleur des différents éléments du Tableau Produits.

§Coins arrondis: permet de définir le facteur d'arrondissement pour les angles du Tableau Produits, même indépendamment.

§Alterner la couleur des lignes: distingue les lignes paires et impaires lignes du Tableau Produits en utilisant deux couleurs de fond différentes, la couleurs définie dans l'Arrière-plan des cellules est une couleur déduite automatiquement ce qui rend plus foncée la première. Alterner la couleur des lignes permet d'augmenter la lisibilité du tableau, surtout quand il devient long.

Les commandes dans le cadre Images permettent de définir des images utilisées dans les pages du Panier:

§Ajouter au panier/ Enlever du panier: permettent de définir les images à utiliser pour créer les boutons "Ajouter au panier" et "Enlever du panier", ou les boutons qui permettent au Client d'insérer ou retirer un Produit du Panier .

§Aperçu non disponible: permet de définir l'image à utiliser quand aucune image n'a été associée à un Produit (dans Paramètres de produit | Image) et dans Objet Liste des produits | Paramètres a été choisi comme Mode d'affichage la présentation "Image et texte" ou "Texte et image" pour les sections.

Après avoir créé le panier e-commerce, il faut insérer dans le site les informations et les liens nécessaires afin que les utilisateurs puissent afficher les informations sur les produits et effectuer l'achat. Pour ce faire, vous pouvez procéder de différentes façons:

1.Vous pouvez créer des pages spécifiques présentant les produits de la façon la plus appropriée (avec des images, des textes, des tableaux, etc.) et y insérer le bouton "Acheter". Dans ce cas, le bouton "Acheter" peut être créé à travers le lien Ajouter au panier (voir, Lien)

2.Vous pouvez créer des pages présentant les produits à travers des fiches où figurent le bouton "Acheter". Dans ce cas, il faut utiliser l'Objet Liste des produits.

Quand vous créez un panier e-commerce, dans le Plan du site est automatiquement affichée la Page Spéciale "Panier e-commerce": vous pouvez la sélectionner et rappeler la fenêtre Propriétés de page pour définir les propriétés principales.

Quand vous testez le fonctionnement du site créé sur la machine, un message vous avertit que la commande ne sera pas envoyée et le programme effectue un transfert automatique à la page de confirmation de la commande. Le panier e-commerce ne fonctionne entièrement qu'après la publication du site sur le serveur.

Pour que le panier e-commerce fonctionne correctement, le serveur sur lequel le site sera publié doit supporter le langage de programmation PHP et la commande MAIL doit être activée. La section WebSite Test du Panneau de contrôle enligne donne des informations de diagnostic sur le serveur.

Si des problèmes surviennent pendant l'envoi des emails, il se peut que le serveur utilisé ne soit pas configuré en mode standard. Dans ce cas, essayez de modifier les prédispositions relatives au script utilisé pour l'envoi de l'e-mail à l'aide de l'option appropriée présente dans Paramètres avancés | Gestion des données. Pour plus d'informations à ce sujet, veuillez contacter votre hébergeur.

Bonnes pratiques:

- | Comment importer/exporter les Produits du Panier
- | Comment définir les contenus du e-mail de confirmation de la Commnade

Approfondissements:

-

Le Panneau de Contrôle en ligne


Fenêtre Paramètres de produit

Panier virtuel e-commerce | Fenêtre Paramètres de produit

Étape 4 - Paramètres avancés > Panier virtuel e-commerce >

Panier virtuel e-commerce | Fenêtre Paramètres de produit

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtre Paramètres de produit, rappelée avec la commande Nouveau produit ou la commande Modifier... présentes dans Panier virtuel e-commerce | Produits, permet de procéder à la définition et à l'insertion d'un nouveau Produit.

La fenêtre est organisée dans les sections suivantes: Général, Image, Options, Remise.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les options de cette section permettent d'insérer certaines informations de base sur un nouveau produit à proposer à travers le Panier virtuel e-commerce.

Les options disponibles pour définir le nouveau produit à ajouter à la liste sont:

§Nom/Code: permet d'insérer un nom ou un code d'identification au produit courant.

§Description: permet d'insérer une description au produit courant.

§Prix: permet d'insérer le prix du produit courant.

§TVA (%): si elle est activée, elle permet d'indiquer la TVA à appliquer au produit courant. Cette option n'est disponible que si dans Panier virtuel e-commerce | Options vous avez sélectionné le Type "TVA incluse dans le prix" ou "TVA exclue du prix" pour les Paramètres TVA .

Selon la manière dont vous voulez définir le panier, vous pouvez entrer les prix des produits toute taxe comprise ou, pour les articles exigeant l'application d'une TVA différente, insérer les prix hors taxe et indiquer à part la taxe à appliquer cas par cas.

§Poids: permet d'indiquer le poids du produit courant pour pouvoir calculer les frais d'expédition à appliquer (voir, Fenêtre Type de livraison).

Selon le type de produits traités dans le panier, vous pouvez utiliser l'option Poids pour indiquer un poids en kilogrammes ou en grammes, plutôt qu'un volume exprimé en litres ou en mètres cubes ou n'importe quelle autre unité de mesure utile. Pour que les coûts d'expédition soient calculés correctement, il est important de choisir une unité de mesure et de l'utiliser pour tous les produits du panier.

§Lien (ex: Page du produit): permet de définir, dans la fenêtre Lien rappelée, le lien à associer au Produit courant. Vous pouvez l'utiliser, par exemple, pour lier la Page du Site où le Produit est présenté dans tous les détails.
Cliquez pour etendre/reduire Référence: les commandes de la Section Image

Les options de cette section permettent d'associer, au produit à proposer à travers le Panier virtuel e-commerce, une ou plusieurs images le présentant.

En important plusieurs images, vous pouvez créer un véritable diaporama: si vous cliquez sur une image, vous pouvez agrandir son affichage dans la fenêtre ShowBox.

Il faut préciser que seulement la première des images associées au produit sera affichée dans le Panier. Toutes les autres images éventuellement insérées seront affichées dans les fiches composées si vous utilisez l'Objet Liste des produits.

Les options disponibles pour créer la liste d'images à associer au produit sont:

§Ajouter... / Supprimer: permettent, respectivement, d'ajouter de nouvelles images ou de supprimer les images sélectionnées dans la liste de celles composant le diaporama. La fenêtre Sélection Fichier permet de sélectionner plusieurs fichiers simultanément.

§En haut / En bas: permettent, respectivement, de déplacer l'image sélectionnée avant ou après l'image précédente/suivante.

§Modifier...: permet de rappeler l''Editeur d'image pour modifier l'image sélectionnée.

Par ailleurs, dans le cadre Propriétés de la boîte d'affichage, les options suivantes sont disponibles:

§Taille maximale: permet de définir les valeurs maximum de la fenêtre Diaporama où apparaissent les images agrandies. En laissant active l'option Conserver la proportion, dans la définition de la taille la proportion entre la largeur et la hauteur est maintenue inchangée.

§Effet: permet de définir, dans la fenêtre Propriétés de l'effet rappelée en cliquant le bouton [image], l'effet de transition à appliquer aux images affichées dans la fenêtre Diaporama.

L'aspect de la fenêtre Showbox peut être complètement personnalisé: avec les options dans la section Styles et modèles | E-mail de l'étape 4 - Paramètres avancés. Il est, par exemple, possible de définir les couleurs, l'ombre, l'opacité et les effets d'ouverture.
Cliquez pour etendre/reduire Référence: les commandes de la Section Options

Les options de cette section permettent de créer la liste des variantes disponibles pour le nouveau Produit à proposer par le Panier virtuel e-commerce.

Comme Variantes principales d'un produit, vous pouvez introduire, par exemple, les tailles ou les couleurs disponibles d'un vêtement ou bien les différents modèles d'un article.

Le Client final peut voir les Variantes disponibles par une liste spéciale affichée dans le Panier e-commerce et/ou dans la fiche de présentation du Produit créée à travers l'Objet Liste des produits et sélectionner celle qui l'intéresse pour la commander.

Les commandes disponibles pour composer la Liste des Options Principales sont:

§Ajouter...: permet d'ajouter une nouvelle Variante principale du produit courant. La Variante ajoutée est affichée dans la Liste des Options Principales et peut être définie par les options dans la section Paramètres des Options Principales.

§Supprimer: permet de supprimer la Variante principale sélectionnée dans la Liste des Options Principales.

§En haut / En bas: permettent, respectivement, de déplacer la variante de produit sélectionnée avant ou après la variante précédente/suivante.

Il est possible de définir chaque Variante principale à travers les Paramètres des Options Principales:

§Nom/Code: permet d'assigner un nom ou un code à la Variante principale que vous êtes en train de créer pour le Produit courant.

§Différence de Prix: permet de spécifier de combien varie le prix de la Variante principale, en positif ou en négatif, selon le Prix du Produit défini dans la section Général.

§Différence de poids: permet de spécifier de combien varie le poids de la Variante principale, en positif ou en négatif, selon le Poids du Produit défini dans la section Général.

Cliquez pour etendre/reduire Référence: les commandes de la Section Remise

À travers les commandes de cette section vous pouvez définir une éventuelle remise pour un nouveau Produit à proposer par le Panier virtuel e-commerce.En cochant l'option Activer la remise quantité vous pouvez créer une liste avec les remises à appliquer selon la quantité du Produit commandé. Toutes les remises sur la quantité introduites sont affichées dans une liste spéciale et les commandes disponibles pour les créer sont:

§Ajouter...: permet de rappeler la fenêtre Remise quantité pour ajouter et définir une remise sur la quantité pour le Produit courant. Dans la pratique il permet de définir la Quantité minimum de Produit nécessaire afin que soit appliquée la Remise (%) prévue.

§Supprimer: permet de supprimer la remise sur la quantité sélectionnée de la liste.

§Modifier...: permet de rappeler la fenêtre Remise quantité afin de pouvoir modifier la remise sur la quantité sélectionnée. Il est aussi possible procéder à cette modification avec un double clic sur la remise.


Fenêtre Type de livraison

Panier virtuel e-commerce | Fenêtre Type de livraison

Étape 4 - Paramètres avancés > Panier virtuel e-commerce >

Panier virtuel e-commerce | Fenêtre Type de livraison

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtreType de livraison, rappelée à l'aide de la commande Ajouter... ou Modifier... présentes dans le cadre Liste de types de livraison de la section Panier virtuel e-commerce | Gestion des commandes, permet de définir les méthodes d'expédition à activer sur le Panier e-commerce.

La fenêtre Type de livraison est articulée dans les sections suivantes: Général, Coût et Message e-mail.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les commandes de cette section permettent de définir une nouvelle méthode d'expédition:

§Nom: associe un nom à la méthode de manière à permettre de l'identifier au moyen d'un texte clair et concis.

§Description: permet d'insérer une explication complète de la méthode.

§Image: sélectionne l'image à associer à la description de la méthode actuelle dans les pages du panier.
Cliquez pour etendre/reduire Référence: les commandes de la Section Coût

La section Coût permet d'indiquer le montant des frais supplémentaires appliqués si le client choisi le type d'expédition courant. Ce montant peut être défini avec l'une des méthodes suivantes:

§Coût fixe: permet d'indiquer un seul coût fixe pour le type d'expédition courant. Ce coût ne change pas quel que soit le paramètre relatif à la commande.

§Coût relatif à la quantité de la commande: permet de créer une ou plusieurs gammes de coût pour la méthode d'expédition courante, en fonction du total de la commande atteint. Pratiquement, à travers les boutons Ajouter... et Modifier..., vous rappelez la fenêtre Frais de livraison permettant de définir le Total de la commande qui doit être atteint ou dépassé pour pouvoir appliquer le Prix d'expédition indiqué.

§Coût associé au poids total: permet de créer une ou plusieurs gammes de coût pour la méthode d'expédition courante, en fonction du total du poids atteint par les produits insérés dans la commande. Dans ce cas également, à travers les boutons Ajouter... et Modifier... vous rappelez la fenêtre Frais de livraison permettant de définir le Poids total qui doit être atteint ou dépassé pour pouvoir appliquer le Coût d'expédition indiqué.

Si vous voulez définir des gammes de prix selon le poids total, pour que les coûts d'expédition soient calculés correctement, il est important d'indiquer le poids de chaque produit présent dans le panier à travers l'option appropriée présente dans la fenêtre Paramètres de produit | Général.

Par ailleurs, vous disposez de l'option:

§TVA (%): si elle est activée, elle permet d'indiquer la TVA à appliquer au coût associé au type d'expédition. Cette option n'est disponible que si dans Panier virtuel e-commerce | Options vous avez sélectionné le Type "TVA incluse dans le prix" ou "TVA exclue du prix" pour les Paramètres TVA .
Cliquez pour etendre/reduire Référence: les commandes de la Section Message e-mail

Dans le champ présent dans cette section vous pouvez insérer un texte qui décrit et explique le type d'expédition courant. Il convient de bien composer ce message car il sera utilisé dans l'e-mail de confirmation de la commande qui sera envoyé au client.

Bonnes pratiques:

-

Comment définir les contenus du e-mail de confirmation de la Commande


Fenêtre Type de paiement

Panier virtuel e-commerce | Fenêtre Type de paiement

Étape 4 - Paramètres avancés > Panier virtuel e-commerce >

Panier virtuel e-commerce | Fenêtre Type de paiement

 Return to chapter overview
Montrer/Cacher le texte caché

La fenêtre Type de paiement, rappelée avec la commande Ajouter... ou Modifier... présentes dans le cadre Liste de types de paiement dans Panier virtuel e-commerce | Gestion des commandes, permet de définir et insérer les méthodes d'expédition à activer dans le Panier Produits.

La fenêtre Type de paiement est organisée dans les sections suivantes: Général, Type et Message e-mail.

Cliquez pour etendre/reduire Référence: les commandes de la Section Général

Les commandes de cette section permettent de définir une nouvelle méthode de paiement:

§Nom: associe un nom à la méthode de manière à permettre de l'identifier au moyen d'un texte clair et concis.

§Description: permet d'insérer une explication complète de la méthode.

§Image: sélectionne l'image à associer à la description de la méthode actuelle dans les pages du panier.
Cliquez pour etendre/reduire Référence: les commandes de la Section Type

Les commandes de cette section permettent de définir le type de paiement demandé en choisissant entre:

§Payer plus tard: dans ce cas, le client passe sa commande et effectue le paiement en différé. Il est indiqué, par exemple, en cas de paiement par virement bancaire.

§Payer maintenant: dans ce cas, le client passe sa commande et la solde immédiatement. Il est indiqué en cas de paiements par PayPal™, ou d'autres circuits analogues, ou bien par carte de crédit.

Si vous sélectionnez l'option Payer maintenant, vous devez définir le Type de paiement requis; selon le type choisi, vous devez définir certains paramètres:

PayPal/Carte de crédit

§Compte PayPal: permet d'entrer le compte obtenu en tant qu'utilisateur PayPal™ enregistré.

§Page de confirmation du paiement: permet d'afficher le plan du site et de sélectionner la page qui apparaît pour confirmer que le paiement a été effectué.

§Page d'erreur du paiement: permet d'afficher le plan du site et de sélectionner la page qui apparaît en cas d'erreur pendant la procédure de paiement.

Code personnalisé

§Code HTML pour le bouton 'Payer maintenant': si vous décidez d'utiliser un système de paiement alternatif à PayPal™, cette option permet de saisir le code HTML fourni, après l'inscription, par le gérant du service de transaction choisi

Le code HTML fourni par votre Fournisseur de Service de Paiement est utilisé pour créer le bouton 'Pay Now' ou 'Payer Maintenant'. Ce code doit être complété par le numéro de commande et le montant total de la commande du client. Pour que le panier fonctionne, vous devez taper manuellement dans le code les tags suivants:

§[ORDER_NO] - identifie le numéro de commande;

§[PRICE] - identifie le montant total à payer.

Par ailleurs, vous disposez aussi des options:

§Coût: permet d'indiquer le montant des frais supplémentaires appliqués si le client choisit la méthode de paiement courante.

§TVA (%): si elle est activée, elle permet d'indiquer la TVA à appliquer au coût associé à la méthode de paiement. Cette option n'est disponible que si dans Panier virtuel e-commerce | Options vous avez sélectionné le Type "TVA incluse dans le prix" ou "TVA exclue du prix" pour les Paramètres TVA .
Cliquez pour etendre/reduire Référence: les commandes de la Section Message e-mail

Cette section présente un champ permettant d'insérer un texte qui décrit et explique la méthode de paiement. Il convient de bien composer ce message car il sera utilisé dans l'e-mail de confirmation de la commande qui sera envoyé au client.

Bonnes pratiques:

-

Comment définir les contenus de l'e-mail de confirmation de commande


Exportation du site

Étape 5 - Exportation du site >

Exportation du site

 Return to chapter overview

Au terme d'une session de travail ou de la création du site entier, à l'étape 5 WebSite X5 permet de choisir le mode d'exportation pour le projet courant. Tout d'abord, grâce au moteur FTP prévu, vous pouvez publier directement les fichiers sur le serveur: le système gère la connexion sécurisée et vous pouvez économiser du temps en travaillant en connexions multiples et en publiant, en cas de mises à jour, seulement les fichiers modifiés. Vous pouvez également exporter le site sur un disque de votre ordinateur pour disposer sur place des fichiers qui seront publiés sur le serveur. Enfin, tous les fichiers du projet peuvent être regroupés dans un seul dossier pour être facilement transférés vers un autre ordinateur et continuer à travailler

Voici dans le détail les options d'exportation disponibles:

Exporter le site sur Internet

Exporter le site sur un disque

Exporter le Projet


Exportation du site sur Internet

Étape 5 - Exportation du site >

Exportation du site sur Internet

 Return to chapter overview
Montrer/Cacher le texte caché

Cette fenêtre permet de publier le site créé sur Internet.

WebSite X5 met à votre disposition un Moteur FTP interne pour exécuter directement la publication en ligne des Sites réalisés. En effet, tous les fichiers permettant d'afficher correctement un Site sur Internet sont enregistrés sur l'ordinateur où vous avez travaillé. Pour que les utilisateurs qui se connectent à Internet puissent voir vos pages, vous devez copier ces fichiers sur un Serveur, à savoir un ordinateur continuellement relié au réseau.

Cliquez pour etendre/reduire Référence: les commandes pour spécifier la connexion au serveur

Pour exporter tous les fichiers relatifs au Site, vous devez tout d'abord indiquer les Paramètres de connexion (communiqués par le fournisseur de votre espace Web):

§Type de serveur: il permet d'indiquer le type de connexion à utiliser pour publier le fichier du site sur le serveur. Selon les caractéristiques supportées par votre serveur, vous pouvez choisir parmi:

-FTP - File Transfer Protocol: prévu par défaut, c'est l'un des premiers protocoles de transmission des données qui a été introduit et largement répandu. La spécification d'origine de FTP ne prévoit aucun chiffrage pour les données échangées entre le Client et le Serveur.

-SFTP - SSH File Transfer Protocol: c'est un protocole de réseau qui prévoit le transfert sûr des données, grâce à l'établissement de sessions distantes chiffrées, ainsi que la fonction de manipulation sur les fichiers distants.

-FTPS - FTP over explicit TLS/SSL: pour résoudre les problèmes de sécurité, il ajoute au protocole FTP original un chiffrage SSL/TLS ainsi qu'une série de commandes et de codes de réponse.

§Adresse FTP: saisissez votre adresse FTP. Voici un exemple d'adresse FTP: "ftp.websitex5.com", où "websitex5.com" est le nom du domaine.

§Nom utilisateur / Mot de passe: saisissez votre Nom Utilisateur et votre Mot de passe.

§Enregistrer le mot de passe: si vous sélectionnez cette option, le mot de passe indiqué sera enregistré et vous ne devrez plus le saisir à l'avenir.

Par ailleurs, vous pouvez indiquer certaines Options, non indispensables pour établir la connexion au serveur, comme:

§Dossier de destination: dans ce champ, vous pouvez indiquer le dossier de destination attribué par le fournisseur d'accès Web. Si vous ne tapez aucun chemin, vous pourrez le choisir dans la page-écran suivante de WebSite X5.

§Port: permet d'indiquer le port du serveur sur lequel est établie la connexion (communiqué par le fournisseur de l'espace Web). Dans la plupart des cas, il n'est pas nécessaire de modifier la valeur définie par défaut.

§Transferts simultanés: permet d'indiquer le nombre de connexions au serveur que le Moteur FTP du programme doit ouvrir simultanément pour publier le fichier du site. Le nombre de connexions équivaut au nombre maximum de fichiers pouvant être exportés simultanément.

Les Transferts simultanés sont une fonction qui doit être supportée par le serveur utilisé. Si tel est le cas, si vous augmentez le nombre de connexions simultanées, au-delà d'une certaine limite, vous n'obtiendrez pas un avantage réel en termes de temps. Il est conseillé de commencer par 3 puis d'essayer de modifier ce paramètre, en l'augmentant progressivement, pour identifier le meilleur nombre de connexions en fonction de la taille de la bande gérée par le serveur utilisé. En règle générale, il est déconseillé de dépasser les 10 connexions simultanées.

§Utiliser FTP passif: activée par défaut, elle prévoit l'utilisation du FTP passif comme mode de publication. Ce mode est conseillé car il assure une plus grande compatibilité de connexion avec le serveur.

§Activer la compression gzip: activée par défaut, elle prévoit que les fichiers relatifs au site soient comprimés pendant l'exportation, pour terminer la publication le plus rapidement possible.

Les serveurs ne supportent pas tous la compression en gzip: si l'option est activée et que le serveur utilisé ne la supporte pas, les fichiers ne seront pas comprimés et la publication sera tout de même exécutée. La compression gzip fonctionne très bien avec les fichiers de grosse taille (contenant par exemple beaucoup d'images ou de vidéos) mais elle est déconseillée avec les fichiers de petite taille.

Après avoir défini les paramètres nécessaires pour effectuer la connexion au serveur, vous pouvez indiquer le Type de téléchargement, à savoir ce que vous voulez effectivement publier:

§Exporter tous les fichiers du site Internet: dans ce cas, tout le site sera publié. Ce mode est indiqué lors de la première publication d'un projet ou après avoir effectué de nombreuses et grosses modifications au site.

§Exporter uniquement les fichiers modifiés après la dernière exportation à la date {0}: dans ce cas, vous publiez seulement les fichiers qui ont été modifiés après l'exportation effectuée à la date indiquée. Ce mode est approprié pour les sites qui sont constamment mis à jour et requiert un temps inférieur par rapport à la publication complète du site.

La date de publication est enregistrée dans le projet: pour cette raison, après avoir publié les fichiers, il est important d'enregistrer toujours les modifications.

Même si vous demandez seulement l'exportation des fichiers modifiés, les pages HTML et les fichiers de ressources (figurant dans le sous-dossier Res) seront republiés: il est en effet très probable qu'ils aient été mis à jour.

§Exporter seulement le Blog et les Flux RSS: dans ce cas, vous publiez seulement les fichiers .PHP et .XML du Blog et les fichiers .XML du Flux RSS gérés à travers les sections appropriées de l'étape 4 - Paramètres avancés. Ce mode, qui est activé seulement si le Blog et/ou le Flux RSS a été déjà publié, est indiqué si vous n'avez pas apporté de mises à jour du Site mais seulement si de nouveaux posts ont été ajoutés dans le Blog ou des nouvelles dans le Flux RSS.
Cliquez pour etendre/reduire Référence: les commandes pour réaliser la publication en ligne

Après avoir défini les paramètres requis, il suffit de cliquer sur le bouton Suivant pour effectuer la connexion au serveur. La connexion au serveur étant établie, les dossiers présents s'affichent dans une fenêtre appropriée. À ce stade, à l'aide des commandes disponibles, positionnez-vous sur le dossier où vous voulez publier les fichiers relatifs au site.

Le dossier où vous voulez publier le site devrait contenir un fichier index.html. Si vous n'êtes pas sûr du dossier à sélectionner, contactez votre Fournisseur d'hébergement : tous les dossiers présents sur le Serveur ne sont pas faits pour la publication.

Cliquez pour etendre/reduire

Voici les commandes disponibles pour agir sur les dossiers et les fichiers présents sur le serveur:

Revenir au dossier supérieur

Permet d'accéder au dossier supérieur.

Actualiser

Permet de recharger le contenu du dossier courant.

Nouveau dossier

Permet de créer un nouveau dossier.

Supprimer

permet d'éliminer le fichier ou le dossier sélectionné.

Renommer

permet de modifier le nom du fichier ou du dossier sélectionné.

Télécharger le fichier sur le serveur / Télécharger le fichier sélectionné à partir du serveur

permettent, respectivement, de publier sur le serveur un ou plusieurs fichiers qui ne font pas partie du projet et de télécharger sur l'ordinateur local des fichiers déjà publiés sur le serveur.

Afficher la liste / Afficher les détails

Elles permettent de définir comment doit être affichée la liste des fichiers.

Enfin, vous disposez d'une section permettant de choisir si afficher:

§Journal: elle affiche tous les messages (à savoir les logs) et les éventuelles erreurs engendrées pendant la communication avec le serveur.

§Fichiers partitionnés: elle affiche les fichiers (le nombre maximum de ces fichiers dépend des connexions simultanées définies) devant être publiés. Pour chaque fichier, une barre de progression affiche l'état d'avancement de la publication. Au terme de la publication, le fichier est supprimé de la queue de transfert.

Pendant l'exportation, WebSite X5 copie sur le serveur tous les fichiers contenus dans le dossier d'enregistrement. Si ce dossier contient des fichiers portant le même nom que les fichiers publiés, ils seront écrasés. En automatique, WebSite X5 ne supprime jamais les fichiers déjà présents sur le serveur: pour supprimer un fichier qui n'est plus nécessaire il faut agir manuellement.


Exportation terminée

Étape 5 - Exportation du site > Exportation du site sur Internet >

Exportation terminée

 Return to chapter overview

Après avoir mené à bien la publication en ligne (voir Exportation du site sur Internet), cette fenêtre permet d'exécuter certaines actions pour publie le Site réalisé à travers des canaux comme la Galerie de WebSite X5, Google, Facebook et Twitter.

Dans le détail, les options disponibles sont:

Le site Web est en ligne !

Permet de lancer le navigateur Internet prédéfini pour naviguer immédiatement sur le site en ligne et contrôler que tout fonctionne correctement.

WebSite X5 Gallery

Permet de se connecter à la section consacrée à la Galerie de WebSite X5 Answers pour signaler le site que vous venez de publier. Nous vous rappelons que la Galerie est une collecte de sites réalisés avec WebSite X5 et soumis directement par leurs auteurs.

Mettre à jour le plan du site sur Google.

Permet d'envoyer à Google™ la signalisation du Plan du Site publié pour demander son indexation par le moteur de recherche.

Diffuser la publication sur Facebook

Permet d'afficher une page de Facebook où, après la connexion, vous pouvez écrire un commentaire pour signaler à tous vos contacts que vous avez publié le site. Le commentaire sera affiché sur le tableau de votre profil.

Diffuser la publication sur Twitter

Permet d'afficher une page de Twitter où, après la connexion, vous pouvez écrire un tweet pour signaler à tous vos contacts que vous avez publié le site. Le tweet sera affiché sur le timeline de vote profil.


Exportation sur disque

Étape 5 - Exportation du site >

Exportation sur disque

 Return to chapter overview

Cette fenêtre permet de publier le site créé sur un autre disque de l'ordinateur.

L'exportation sur disque permet d'avoir une copie sur l'ordinateur des fichiers qui seront publiés sur le Serveur, pour pouvoir la mettre sur CD/DVD/USB ou modifier les pages HTML créées avant la publication.

Pour exporter tous les fichiers du Projet, il suffit de spécifier:

§Dossier de destination: permet d'indiquer le dossier où vous voulez exporter le site créé. Si le dossier spécifié n'existe pas, il sera automatiquement créé.

L'Exportation sur disque n'est pas indiquée pour la crèation de copies de Sauvegarde du Projet car elle permet de disposer des fichiers créés par le programme pour la publication en ligne et non des fichiers du Projet sur lesquels travailler.

Pour créer des copies de Sauvegarde du Projet afin de pouvoir faire une restauration d'une version précédente, il faut utiliser les fonctions de Sauvegarde incluses dans le menu Enregistrer.

Pour créer une copie de Sauvegarde à utiliser en cas de perte du Projet original, il est nécessaire d'utiliser la fonction Exporter le Projet: ainsi vous disposez d'une copie des fichiers originaux du Projet.

Bonnes pratiques:

-

Comment gérer la Sauvegarde des Projets


Exporter le Projet

Étape 5 - Exportation du site >

Exporter le Projet

 Return to chapter overview

Cette fenêtre permet d'exporter dans un seul fichier comprimé tous les fichiers associés au Projet pour les transférer sur un autre ordinateur ou créer une copie de sauvegarde.

Pour exporter les fichiers du Projet, il suffit d'indiquer:

§Dossier de destination: dans ce champ, tapez le nom du dossier où le fichier de projet doit être exporté. Si le dossier indiqué n'existe pas, il est automatiquement créé.

Après l'exportation, le programme crée dans le dossier de destination indiqué un seul fichier comprimé portant le nom du Projet, suivi de l'extension .IWZIP. Ainsi, pour le projet "MonProjet" le programme créera le fichier MonProjet.iwzip. Dans ce fichier comprimé, le programme enregistre le fichier de projet (fichier .IWP) et tous les fichiers qui y sont reliés (par exemple, relatifs aux images, vidéos ou animations importées).

Avant de lancer l'exportation du Projet il est possible activer les options suivantes:

§Inclure une copie des fichiers d'aperçu du site Web: inclue dans le fichier comprimé .IWZIP aussi les fichiers nécessaires pour l'affichage de l'Aperçu du Site en local. Incluant ces fichiers, la taille du fichier .IWZIP augmente mais il ne sera pas nécessaire de les recréer si on importe le Projet sur un autre ordinateur.

Le fichier comprimé .IWZIP pourra être transféré sur un ordinateur différent de celui sur lequel il a été créé et ouvert dans le programme à travers la fonction Importer..., disponible dans la fenêtre Choix du projet.

Bonnes pratiques:

-

Comment gérer la Sauvegarde des Projets


Comment gérer la sauvegarde des Projets

Bonnes pratiques > Paramètres Initiales >

Comment gérer la sauvegarde des Projets

 Return to chapter overview
Montrer/Cacher le texte caché

Un aspect crucial dans la gestion d'un Projet est représenté par l'activité de sauvegarde.

Faire une sauvegarder d'un projet consiste à créer une copie de sauvegarde, qui sera archivée sur le même ordinateur ou sur un autre support de mémorisation, afin d'assurer une certaine redondance des données.

Avoir une ou plusieurs copies de sauvegarde permet de résoudre deux genre de problèmes:

§Disaster recovery - ou restaurer le Projet en cas d'accident irréparable du, par exemple, à une défaillance de l'ordinateur ou à la suppression non voulu de données.

§Versioning - ou la création de copies correspondantes à des versions différentes du Projet, afin de, par exemple, annuler les modifications que vous avez faites dans une session, simplement en restaurant une sauvegarde précédente.

Évidemment, afin que l'activité de sauvegarde soit efficace,elle doit être correctement mise en place et réalisée systématique.

Cliquez pour etendre/reduire En pratique: Versioning - Comment mettre en place la création automatique d'une copie de sauvegarde

Pour mettre en place la création automatique d'une copie de sauvegarde d'un Projet:

§Ouvrez le Projet.

§Activez l'option Créer une copie de sauvegarde lors du premier enregistrement du projet disponible dans le menu Enregistrer.

§Autrement ou en même temps, activez l'option Créer copie de sauvegarde lors de chaque téléchargement en amont toujours disponible dans le menu Enregistrer.

Alors que l'option Créer une copie de sauvegarde lors du premier enregistrement du projet permet de créer une copie de sauvegarde du Projet avant le premier enregistrement, l'option Créer copie de sauvegarde lors de chaque téléchargement en amont crée la copie de sauvegarde avant la publication du Site en ligne.

Toutes les copies de sauvegarde ainsi créées sont enregistréer dans le sous dossier Backup qui se trouve dans le Dossier de projets défini par la fenêtre Préférences.
Cliquez pour etendre/reduire En pratique: Versioning - Comment restaurer une copie de sauvegarde d'un Projet

Pour restaurer une copie de sauvegarde d'un Projet:

§Ouvrez le sous dossier Backup dans le Dossier de projets (défini dans la fenêtre Préférences) et sélectionnez le fichier correspondant à la copie de sauvegarde qu'on souhaite restaurer: le fichier Backup.iwprj généré par la fonction Créer une copie de sauvegarde lors du premier enregistrement du projet ou un fichier loaded_timestamp.iwprj généré par la fonction Créer copie de sauvegarde lors de chaque téléchargement en amont.

§Coupez le fichier sélectionné dans le sous dossier Backup et collez-le dans le Dossier de projets.

§Effacez le fichier Project.iwprj et renommez le fichier de de Sauvegarde comme "Project.iwprj".
Cliquez pour etendre/reduire En pratique: Disaster Recovery - Comment créer une copie de sauvegarde d'un Projet

Pour créer une copie de sauvegarde d'un Projet à enregistrer dans un support de mémoire autre que l'ordinateur sur lequel vous travaillez il est nécessaire:

§À l'Étape 5 - Exportation du site choisissez Exporter le Projet afin d'exporter dans un seul fichier compressé (.IWZIP) tous les fichiers liés au Projet.

§Copiez le fichier .IWZIP obtenu dans le support de mémoire choisi pour conserver la copie de sauvegarde.

Cliquez pour etendre/reduire En pratique: Disaster Recovery - Comment restaurer une copie de sauvegarde d'un Projet

Pour restaurer une copie de sauvegarde d'un Projet enregistré dans un support de mémoire autre que l'ordinateur sur lequel vous travaillez il est nécessaire:

§Dans la fenêtre Choix du projet cliquez sur le bouton Importer... afin de sélectionner le fichier compressé (.IWZIP) correspondant au Projet à restaurer.

§Sélectionnez le Projet restauré pour l'ouvrir et procédere à la restauration.


Comment gérer les langues pour les textes insérés automatiquement

Bonnes pratiques > Étape 1 - Paramètres généraux >

Comment gérer les langues pour les textes insérés automatiquement

 Return to chapter overview
Montrer/Cacher le texte caché

Certains textes présents dans les Pages crées avec WebSite X5 sont insérés automatiquement par le Programme; ce sont des textes comme, par exemple, des liens à des Ancres internes, des Boutons de l'Objet de la galerie, des étiquettes de l'Objet Formulaire d'envoi d'email, des étiquettes et des textes du Panier e-commerce, des textes du Plan du Site.

Afin que ces textes soient insérés automatiquement dans la langue correcte, il est nécessaire spécifier la langue principale du Site à travers l'option Langue du contenu disponible dans la fenêtre Paramètres généraux. Par défaut, WebSite X5 permet de choisir entre un certain nombre de Langues, entre autre Italien, Anglais et Allemand, pour lesquelles il dispose déjà de toutes les traductions nécessaires. En tout cas, les traductions mises en place peuvent être modifiées, il est toujours possible d'ajouter ou importer de nouvelles Langues ou supprimer celles qui ne sont pas nécessaires. Pour exécuter ces opérations il faut accéder à la fenêtre Gestion du contenu linguistique en cliquant sur le bouton [image] qui se trouve à côté de l'option Langue du contenu.

Cliquez pour etendre/reduire En pratique: Comment modifier une etiquette déjà insérée

Les étiquettes des boutons "Envoyer" et "Réinitialiser" prévus à la fin du formulaire de contact sont un exemple de texte inséré automatiquement par le Programme.

En supposant que vous vouliez modifier l'étiquette "Réinitialiser" en "Annuler" après que la Langue "Italien" ait été sélectionnée pour les contenus, vous devez procéder ainsi:

§Dans la fenêtre Gestion du contenu linguistique, si elle n'est pas encore active, cliquez sur la Langue "IT - Italien" de façon à afficher la colonne relative dans la Table des contenus.

§Dans la première colonne de la Table des contenus, identifiez l'étiquette "form_reset" qui est celle relative à l'étiquette à modifier: déplacez-vous sur la ligne jusqu'à la cellule qui correspond dans la colonne à la Langue Italienne. Cliquez deux fois sur la cellule jusqu'à afficher le pointeur: Fermez la fenêtre: ainsi les modifications seront automatiquement enregistrées.
Cliquez pour etendre/reduire En pratique: Comment ajouter une nouvelle Langue

Pour créer un Site dans une Langue qui n'est pas encore prévue (par exemple, en Portugais), pour éviter que les textes gérés automatiquement soient insérés dans la version anglaise (utilisée par défaut), il faut prévoir une nouvelle Langue et entrer les traductions nécessaires. Si on a les compétences linguistiques nécessaires, il est très facile:

§Dans la fenêtre Gestion du contenu linguistique cliquez sur le bouton Ajouter une nouvelle langue et, à travers la fenêtre de dialogue qui s'affiche, entrez "PT - Português": ainsi le nouvel élément apparaît à la fin de la liste des Langues disponibles.

§Cliquez sur "PT - Português" pour afficher la colonne relative à cette Langue dans la Table des traduction.

§Cliquez dans les différentes cellules de la colonne "PT - Português" pour insérer les traductions.

§Une fois les traductions insérées, fermez la fenêtre: ainsi les modifications seront automatiquement enregistrées.

§Dans la fenêtre Paramètres généraux sélectionnez "PT - Português" comme Langue du contenu.
Cliquez pour etendre/reduire En pratique: Comment exporter/importer une Langue

Si vous avez besoin de travailler sur le développement d'un Site dans une Langue qui n'est pas fournie par défaut par le programme sur deux ordinateurs différents, vous pouvez exporter le nouveau langage créé sur un poste de travail et l'importer dans la deuxième, en évitant de la recréer à partir de zéro.

§Sur le premier ordinateur, accédez à la fenêtre Gestion du contenu linguistique, cliquez sur le bouton Ajouter une nouvelle langue et procédez à la création de la nouvelle Langue.

§Sélectionnez la Langue créée dans la liste des Langues et cliquez sur le bouton [image] Exporter la langue sélectionnée: un fichier .XML sera enregistré dans le dossier spécifié.

§Déplacez le fichier .XML obtenu sur le deuxième ordinateur.

§Ouvrez le Programme, accédez à la fenêtre Gestion du contenu linguistique et cliquez sur le bouton [image] Ajouter une nouvelle langue en sélectionnant le fichier .XML préparé.

Si la Langue importée est déjà dans la liste elle n'est pas dupliquée, mais seulement les nouveaux éléments seront ajoutés et ceux qui ont été modifiés seront mis à jour.

Bonnes pratiques:

-

Comment créer un Site multilingue


Que faire pour pouvoir utiliser Google Webmaster Central™

Bonnes pratiques > Étape 1 - Paramètres généraux > Intégration avec Google >

Que faire pour pouvoir utiliser Google Webmaster Central™

 Return to chapter overview

Google Webmaster Central™ c'est un ensemble d'outils mis gratuitement à disposition par Google™ pour permettre au Webmaster de rendre les sites conformes à ses indications. Ces outils expliquent comment Google™ voit un Site et vous aident à diagnostiquer les éventuels problèmes: si vous les utilisez correctement, ils vous aideront à améliorer la visibilité de votre Site sur le Moteur.

Pour utiliser Google WebMaster Central™, vous devez disposer d'un compte Google puis démontrer que vous êtes le véritable propriétaire du Site à analyser. Une des méthodes pour démontrer cela est de copier un Méta Tag fourni par Google™ et de le coller sur la page d'accueil du Site dans la première section <head> de la page, avant la section <body>.

Résumons les étapes à suivre:

§Vous devez disposer d'un compte sur Google™.

§Accédez à la page de présentation de Google Webmaster Central™ et connectez-vous.

§Dans la Page d'accueil, cliquez sur le bouton Ajouter un site, , tapez l'URL du Site que vous voulez contrôler et validez en cliquant sur Continuer.

§Dans la page Vérifier Propriétés qui apparaît , choisissez comme méthode de vérification Ajouter un Méta tag à la page d'accueil de votre site.

§Copiez le Méta tag fourni par Google™ et collez-le dans le champ Méta Tag de vérification pour Google WebMaster Central de la fenêtre Paramètres généraux | Avancées de WebSite X5: le Programme veillera à insérer le Méta tag dans la bonne position à l'intérieur du code HTML de la Page d'accueil.

§Le Méta tag de contrôle fourni par Google™ se présente comme dans l'exemple ci-dessous:

<meta name="verify-v1" content="VOPYsjbR4uw/YqV+MWLB0lVmJt0niwdkv9PQTsTREHQ=" />

§Après avoir publié le Site en ligne, revenez sur cette même page de Google Webmaster Central™ et terminez la procédure en cliquant sur Vérifier.


Comment activer un service de statistiques comme Google Analytics™

Bonnes pratiques > Étape 1 - Paramètres généraux > Intégration avec Google >

Comment activer un service de statistiques comme Google Analytics™

 Return to chapter overview

Le réseau offre de nombreux services de statistiques dont le plus connu est celui fourni par Google: Google Analytics™. Cet outil, complètement gratuit, permet de disposer de nombreux rapports pour contrôler et analyser, même d'une manière approfondie, les accès au site. Google Analytics™ peut être utilisé à différents niveaux: vous pouvez demander simplement le nombre de visites effectuées ou contrôler la progression des campagnes publicitaires répandues par le programme Google Adsense™.

Pour pouvoir exploiter Google Analytics™, il faut indiquer au Moteur le Site à analyser et notamment les Pages à contrôler régulièrement: pour ce faire, il faut insérer un code de contrôle dans le code des Pages du Site.

Résumons les étapes à suivre:

§Vous devez disposer d'un compte sur Google™.

§Accédez à la page de présentation de Google Analytics™ et connectez-vous.

§Dans la page Paramètres Analytics, tapez le site à analyser à l'aide de la commande Ajouter nouveau profil.

§Le profil étant créé, dans la page Vue d'ensemble cliquez sur le bouton Modifier dans la colonne Actions pour le Site Web voulu.

§Dans la page Paramètres profil qui apparaît, vous verrez l'inscription "contrôle inconnu": cliquez sur Vérifier l'état pour afficher le code à utiliser pour contrôler les pages.

§Copiez le code pour le contrôle fourni par Google™, ouvrez la fenêtre Paramètres généraux | Avancées de WebSite X5 et collez-le dans le champ Code personnalisé, indiquant qu'il doit être inséré Avant la balise </HEAD>.

Le code du contrôle fourni par Google™ se présente comme suit:

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-110367-1");

pageTracker._trackPageview();

} catch(err) {}</script>


Comment créer et connecter le Plan du Site

Bonnes pratiques > Étape 1 - Paramètres généraux > Intégration avec Google >

Comment créer et connecter le Plan du Site

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 WebSite X5 est en mesure de créer le Plan du Site XML.

Un Plan du Site est un fichier XML contenant la liste des Pages d'un Site: il a été introduit par Google™ (et il est à présent utilisé par Yahoo! et MSN) pour améliorer et rendre plus rapide le balayage des sites Web. En d'autres mots, en créant et en envoyant le Plan du site, les Webmasters peuvent s'assurer qu'un Moteur de recherche, dans ce cas Google™, connaisse toutes les Pages présentes dans un Site, y compris celles qui risqueraient de ne pas être déterminées à travers la procédure de balayage normale.

À travers le Plan du Site, vous pouvez véhiculer aux Moteurs de recherche même des informations relatives aux contenus du Site comme des vidéos, des images, des nouvelles, etc. . Par ailleurs, le Plan du Site peut contenir des informations supplémentaires comme: avec quelle fréquence chaque page est mise à jour; la date de la dernière modification des Pages; l'importance de chaque Page dans la hiérarchie du Site (cette priorité n'a aucun effet sur le positionnement des Pages dans les résultats de recherche).

Cliquez pour etendre/reduire En pratique: Activer le Plan du site

Pour créer et connecter le Plan du Site à un site, il suffit de laisser activée par défaut, l'option Créer automatiquement le SiteMap présente dans la fenêtre Paramètres généraux | Avancées.

Ceci étant fait, vous pouvez faire en sorte que le Plan du Site contienne certaines informations supplémentaires, spécifiques de chaque Page, comme suit:

§A l'étape 2 - Création du plan sélectionnez la page sur laquelle vous voulez travailler.

§Cliquez sur le bouton Propriétés pour rappeler la fenêtre Propriétés de page et ouvrez la section Avancées

§Laissez active l'option Ajouter cette page au plan du site, définissez la Priorité des contenus et la Fréquence de mise à jour .

§Répétez ces opérations pour les différentes Pages du Site.
Cliquez pour etendre/reduire En pratique: Ajouter les images dans le Plan du site

Le Plan du Site peut être utilisé pour passer à Google™ des informations supplémentaires sur les images présentes dans un Site, en l'aidant ainsi à trouver des images qui autrement ne seraient pas relevées (par ex. celles comprises dans des formulaires JavaScript) et à comprendre quelles sont les informations les plus importantes. Par exemple, si vous n'insérez pas dans le Plan du Site les images qui font partie du modèle graphique ou qui ont une valeur purement ornementale, vous indiquez à Google™ qu'elles sont moins importantes que d'autres.

Google™ spécifie que vous pouvez insérer au maximum 1000 images pour chaque page à l'intérieur d'un Plan du Site et que l'indexation de toutes les images ou l'utilisation de toutes les informations insérées n'est pas garantie.

Après avoir lancé la création du Plan du Site, vous pouvez ajouter les informations sur une image d'une façon très simple:

§Double-cliquez sur l'Objet Image relatif à l'Image sur laquelle vous voulez travailler pour accéder à la fenêtre Objet Image.

§Ouvrez la section Plan du site et sélectionnez l'option Ajouter l'image à la carte du site.

§Si vous voulez, vous pouvez remplir les champs Titre, Brève description, Position géographique (par ex., adresse, ville, etc.) et Licence URL.

§Répétez les opérations décrites pour toutes les Images importantes contenues dans le Site.

Pour plus d'informations, voir Objet Image | Plan du site.
Cliquez pour etendre/reduire En pratique: Ajouter les informations sur les vidéos dans le Plan du site

Le Plan du Site peut être utilisé pour passer à Google™ des informations sur les vidéos présentes dans un Site. Dans ce cas également, Google™ ne donne pas de garanties mais l'insertion de vidéos dans le Plan du Site peut faire en sorte que ces contenus soient plus facilement relevés et donc compris dans la recherche sur Google Vidéo™.

À travers le Plan du Site, vous pouvez indiquer une série d'informations supplémentaires, comme par exemple le titre, la description et la durée de la vidéo, qui peuvent simplifier la recherche. Ces informations et d'autres sont proposées dans les Pages avec les résultats des recherches (SERP). Il faut toutefois souligner que, en cas de différences, Google™ pourrait décider d'utiliser dans le SERP le texte disponible dans les pages vidéo au lieu des contenus prédisposés à travers le Plan du Site.

Pour compléter le Plan du Site en ajoutant les informations sur les vidéos présentes, il suffit de procéder comme suit:

§Double-cliquez sur l'Objet Vidéo/Son relatif à la vidéo sur lequel vous voulez travailler pour accéder à la fenêtre Objet Vidéo/Son.

§Ouvrez la section Plan du site et sélectionnez l'option Ajouter la vidéo à la carte du site.

§Définissez les informations qui doivent être obligatoirement présentes à l'intérieur du Plan du Site: Titre, Brève description et Aperçu de l'image pour la vidéo.

§Vous pouvez, si vous le souhaitez, définir les paramètres suivants: Catégorie, Mots-clé pour la recherche, Date de publication, Durée (sec.) et Contenu adapté à tous.

§Répétez les opérations décrites pour tous les Vidéos importantes contenues dans le Site.

Pour plus d'informations, voir Objet Vidéo/Son | Plan du site.
Cliquez pour etendre/reduire En pratique: Supprimer une page du Plan du site

Par défaut, après avoir lancé la création du Plan du Site, toutes les Pages d'un Site y sont comprises. En tout cas, si vous voulez que les Moteurs de recherche ne prennent pas en considération une ou plusieurs pages, il suffit de les supprimer du Plan du Site. Pour ce faire, il suffit de:

§Dans la fenêtre étape 2 - Création du plan, sélectionnez la page à supprimer du Plan du Site.

§Cliquez sur le bouton Propriétés pour rappeler la fenêtre Propriétés de page et ouvrez la section Avancées.

§Retirez la coche de l'option Ajouter cette page au plan du site.

§Confirmez et enregistrez.

Sujets corrélés:

- | Plan du Site (Wikipedia.it)
- | Informations sur Plan du Site (Centre WebMaster de Google)
- | Ajouter des informations sur les images à un Plan du Site (Centre WebMaster de Google)
- | Informations sur les contenus vidéos des Plans du Site (Centre WebMaster de Google)


Comment travailler avec les Modèles

Bonnes pratiques > Étape 1 - Paramètres généraux > Les Modèles graphiques >

Comment travailler avec les Modèles

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 permet une gestion des Modèles graphiques très agile et flexible. Grâce à des modèles prédéfinis, de nombreuses options de personnalisation et, surtout, la possibilité de créer vos propres Modèles à partir de zéro, tout le monde peut obtenir le résultat graphique souhaité en choisissant le mode de fonctionnement qui lui convient le plus.

Enfin, la possibilité d'exporter et d'importer des Modèles (en fait, les retirer des Projets pour lesquels ils ont été créés) facilite grandement le partage de ces ressources.

Cliquez pour etendre/reduire En pratique: Comment mettre en place un Modèle Prédéfini

WebSite X5 met à disposition une galerie de plus de 1.500 Modèles graphiques prédéfinis. Définir un Modèle choisi parmi les prédéfinis est très simple:

§Ouvrez la fenêtre Sélection du modèle et utilisez le filtre sur Type de menu pour afficher seulement ceux qui ont le menu dans la position qui vous intéresse (Horizontal ou vertical).

§Faites défiler les aperçus des Modèles afin d'identifier celui qui s'adapte au mieux à l'objet du Site.

§Identifiez le modèle à utiliser, sélectionnez-le et cliquez sur le bouton Suivant pour l'appliquer au Projet et passer à la fenêtre Modifier le modèle pour ajouter des éléments à l'en-tête et au pied de page.
Cliquez pour etendre/reduire En pratique: Comment mettre en place un Modèle Personnalisé

Une fois que vous avez créé une mise en page à travers un programme graphique externe, vous pouvez le configurer en WebSite X5 pour exploiter la possibilité d'utiliser le Modèle Personnalisé:

§Ouvrez la fenêtre Sélection du modèle et utilisez le filtre sur les Catégories pour afficher les Modèles Personnalisés.

§Si vous n'avez pas créé d'autres modèles, un Modèle Personnalisé est déjà présent dans la liste: sélectionnez-le et cliquez sur le bouton la liste présente déjà un aperçu du modèle: sélectionnez-le et cliquez sur le bouton Modifier (ou faire un double clic sur le modèle) pour accéder à la fenêtre Modèle personnalisé.

§Toutefois, si vous voulez créer un nouveau Modèle Personnalisé à ajouter à la galerie, cliquez sur le bouton Nouveau modèle: donnez un nom au modèle, puis vous pouvez procéder à sa personnalisation.

Tous les Modèles Personnalisés créés s'ajoutent à la galerie des Modèles et ainsi ils seront disponibles pour d'autres Projets différents de celui pour lequel il ont été créés.
Cliquez pour etendre/reduire En pratique: Comment créer un nouveau Modèle en partant d'un Modèle Prédéfini

Un Modèle Prédéfini peut représenter une excellente base de départ pour réaliser un nouveau Modèle Personnalisé, afin d'obtenir une mise en page plus originale et adaptée au contenu du Site. Pour cela il faut procéder ainsi:

§Ouvrez la fenêtre Sélection du modèle et, en utilisant les filtres disponibles, identifiez et sélectionnez le Modèle Prédéfini à partir duquel vous voulez commencer.

§Cliquez sur le bouton Dupliquer pour obtenir une copie du Modèle: cette copie s'ajoute aux Modèles Prédéfinis.

§Sélectionnez la copie du Modèle et cliquez sur le bouton Suivant pour ouvrir la fenêtre Modèle personnalisé et effectuer les modifications nécessaires.
Cliquez pour etendre/reduire En pratique: Comment importer/exporter un Modèle

Le Modèle graphique créé pour un Projet peut-être facilement exporté de façon à l'importer dans un deuxième temps et l'utiliser aussi sur d'autres ordinateurs et, peut-être, par d'autres Utilisateurs:

Pour exporter un Modèle créé:

§Ouvrez la fenêtre Sélection du modèle, sélectionnez le Modèle créé et cliquez sur le bouton Exporter: le fichier .IWTLP est créé dans le répertoire d'exportation indiqué.

§Copiez le fichier .IWTPL sur l'ordinateur où vous voulez importer le Modèle.

Pour importer un Modèle précédemment exporté avec WebSite X5:

§Ouvrez la fenêtre Sélection du modèle et cliquez sur le bouton Importer: sélectionnez le fichier .IWTPL qui correspond au Modèle à importer.

§Le Modèle importé sera disponible dans la liste des Modèles Personnalisés.

Dans les fichiers .IWTPL sont enregistrés seulement les images et les paramètres relatifs au Modèle graphique: pendant la phase d'exportation les informations relatives au Projet ne sont pas maintenues.

Pour exporter un Projet il faut utiliser les fonctions appropriées qui sont décrites à l'étape 5 - Exportation du site.

Bonnes pratiques:

-

Où trouver de nouveaux modèles pour WebSite X5


Ou trouver de nouveaux Modèles pour WebSite X5

Où trouver de nouveaux modèles pour WebSite X5

Bonnes pratiques > Étape 1 - Paramètres généraux > Les Modèles graphiques >

Où trouver de nouveaux modèles pour WebSite X5

 Return to chapter overview

Si vous recherchez un nouveau modèle à utiliser dans la création ou le restyling de votre site web, vous trouverez de nombreux modèles dans WebSite X5 Templates, la section du site officiel de WebSite X5 qui se trouve à l'adresse http://answers.websitex5.com/templates.

WebSite X5 Templates propose un grand nombre de modèles graphiques, réalisés par Incomedia ou d'autres utilisateurs, aussi bien gratuits que payants, que vous pouvez télécharger et utiliser pour votre projet.

Par ailleurs, vous pourrez enrichir les archives des Modèles en y insérant vos travaux. Si vous êtes passionnés d'art graphique Web, vous pouvez devenir l'un de nos auteurs affiliés, proposer vos modèles et gagner de l'argent grâce à cette activité. Pour plus d'informations sur l'affiliation, accédez à l'adresse http://answers.websitex5.com/templates.

N'oubliez pas de rendre visite périodiquement à WebSite X5 Templates pour voir les nouveautés: vous pouvez également souscrire au Flux RSS pour être tenu informé des nouveautés.


Comment créer et travailler sur le Plan du Site

Bonnes pratiques > Étape 2 - Création du plan >

Comment créer et travailler sur le Plan du Site

 Return to chapter overview
Montrer/Cacher le texte caché

Dans WebSite X5 le Plan du Site se présente avec une structure arborescente: tout en haut on trouve la Page d'Accueil et puis en descendant dans les différents Niveaux, on trouve les Pages insérées. La création du Plan du Site prévoit, donc, que autre que la Page d'Accueil, toujours présente, une série de Pages liées par le Menu: pour cette raison il est nécessaire insérer toutes les Pages et organiser au même temps les différents niveaux du menu.

Rappelons que dans WebSite X5 les Niveaux sont des catégories et non des pages avec des contenus propres. Pour plus de simplicité, les Niveaux peuvent être associés à des "conteneurs de Pages".

Même les séparateurs n'ont pas de contenus: ce sont des éléments qui sont utilisés pour organiser visuellement le Menu de navigation.

Cliquez pour etendre/reduire
Exemple de Plan du Site et Menu correspondant

L'objectif dans la conception du Plan du Site est, alors, de créer une structure dans laquelle tous les contenus du Site soient organisés de façon logique afin qu'ils puissent être trouvés facilement par les personnes qui visitent le Site.

Cliquez pour etendre/reduire En pratique: Comment concevoir le Plan du Site

D'un point de vu pratique, concevoir le Plan du Site dans WebSite X5 est très facile:

§Dans la fenêtre à l'étape 2 - Création du plan utilisez les boutons Nouveau niveau, Nouvelle page et Séparateur pour ajouter au Plan un nouveau Niveau, une nouvele Page ou un nouveau Séparateur.

§Toutes les entrées du Plan doivent être rédigées avec soin: elles seront incluses comme éléments dans le Menu de navigation et comme noms des fichiers. Pour renommer un élément, il suffit de cliquer deux fois dessus ou utilisez le bouton Renommer.

§Le Plan du Site peut être modifié à tout moment en déplaçant Pages, Niveaux et Séparateurs insérés: pour ce faire, vous devez sélectionner l'élément que vous souhaitez modifier et faites-le glisser à la position désirée (Glisser-Déposer), ou utilisez les boutons En haut / En bas.
Cliquez pour etendre/reduire En pratique: Comment travailler sur le Plan du Site (commandes et raccourcis)

En travaillant directement sur ​​le Plan vous pouvez profiter de quelques raccourcis pour accomplir des tâches plus rapidement:

§En cliquant à nouveau sur un Niveau, sur une Page (y compris la Page d'Accueil) ou un Séparateur déjà sélectionné, vous pouvez les renommer (autrement avec le bouton Renommer). Les Alias des Pages Spéciales insérés dans le répertoire Menu peuvent également être renommés, tandis que les Pages Spéciales non.

§Après avoir sélectionné une Page, en cliquant directement sur ​​le Titre complet ou sur la Description indiquée vous pouvez changer les textes (autrement, vous devez ouvrir à nouveau la fenêtre Propriétés de page).

§En double-cliquant sur un Niveau vous pouvez l'étendre, et voir toutes les Pages qu'il contient, ou le réduire (autrement vous devez cliquer sur les boutons Etendre et Réduire). De même, vous pouvez étendre ou réduire un Niveau, simplement en cliquant sur ​​la flèche présente devant le nom.

§En double-cliquant sur une Page, vous affichez la fenêtre Création de la page pour procéder à sa construction.

§En double-cliquant sur une Page Spéciale vous affichez la fenêtre de l'étape 4 - Paramètres avancés qui permet sa création/mise à jour.

§Si vous sélectionnez un Niveau et vous le faites glisser vers un nouvel emplacement, vous le déplacez avec toutes les Pages qu'il contient (autrement vous utilisez les boutons En haut et En bas).

§En sélectionnant une ou plusieurs Pages, vous pouvez les faire glisser et déplacer vers un nouvel emplacement (autrement vous devez utiliser les boutons En haut et En bas). Pour effectuer une sélection multiple, vous pouvez utiliser les combinaisons CTRL + clic ou Maj + clic: la sélection multiple peut inclure des pages Invisibles ou Protégées.

§En sélectionnant le répertoire Menu vous pouvez cacher complètement le menu de navigation, en cliquant sur le bouton Page invisible dans le menu.

§En sélectionnant une Page Spéciale et en la faisant glisser dans le répertoire Menu, ou entre les Pages et les Niveaux qui composeront le Menu de navigation, un Niveau est créé et il agit comme Alias de la Page Spéciale elle-même. Ce niveau a donc le même nom que la Page Spéciale et il est lié à la Page Spéciale. Par conséquent, vous pouvez insérer dans le Menu de navigation un lien qui donne accès à la Page avec les résultats du Moteur de Recherche interne, à la Page d'Accueil, au Blog, à la Page de Connexion ou au Panier e-commerce.

§En sélectionnant une ou plusieurs Pages, il est possible de les copier et les coller dans le même Projet ou dans un autre Projet ouvert dans une autre fenêtre du Programme. Les opérations Copier et Coller peuvent être effectuées en utilisant les commandes appropriées de la Barre des Outils, du menu contextuel déclenché par un clic du bouton droit de la souris, ou par les combinaisons de touches habituelles CTRL + C et CTRL + V. Évidemment, vous ne pouvez pas utiliser les commandes Copier et Coller avec les Pages Spéciales.


Comment mettre en place une Page avec la Grille de mise en Page

Bonnes pratiques > Étape 3 - Création de la page >

Comment mettre en place une Page avec la Grille de mise en Page

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 propose un système de mise en page unique qui permet de créer les Pages de façon complètement visuelle.

Dans la pratique, la Page est représentée par une Grille dans laquelle il est possible de déterminer le nombre de lignes et de colonnes, afin de préparer les Cellules nécessaires pour contenir les contenus.

Par un simple glisser-déposer des Objets disponibles, vous pouvez alors commencer à insérer les contenus.

Cliquez pour etendre/reduire En pratique: Comment mettre en place la Grille de mise en page

A partir de la Grille proposé par défaut, composée de 2 lignes par 2 colonnes, il faut ajouter un certain nombre de lignes et de colonnes suffisantes pour accueillir tous les contenus de la Page et, d'autre part, insérer dans les cellules les Objets nécessaires.

Pour ajouter lignes et colonnes il suffit utiliser les boutons [image] [image] présents dans la Barre des Outils. On peut créer une grille avec un maximum de 64 lignes et 12 colonnes.

En automatique, toutes les lignes et les colonnes de la Grille de mise en page ont la même largeur et hauteur. Vous pouvez régler manuellement la valeur absolue (en pixels) ou relative (en pourcentage) des colonnes agissant sur les curseurs sur le fond de la Grille:

§En cliquant et en faisant glisser un curseur, vous déplacez la limite de la colonne. De cette manière, la colonne aura la largeur spécifiée dans la note qui s'affiche en faisant glisser le curseur. Tout en maintenant la touche CTRL enfoncée pendant que vous faites glisser le curseur, déplacer d'un pixel à la fois, sinon, le mouvement se fait avec un pas égal à un dixième de l'espace disponible.

Cliquez pour etendre/reduire

§En cliquant avec le bouton droit de la souris sur un curseur et choisissant Définir la largeur de la colonne dans le menu contextuel, vous pouvez saisir la valeur de la largeur de la colonne en pixels.

Cliquez pour etendre/reduire

§En cliquant avec le bouton droit de la souris sur un curseur et choisissant Réinitialiser la même largeur des Colonnes dans le menu contextuel, vous ramenez toutes les colonnes à la même largeur.
Cliquez pour etendre/reduire En pratique: Comment insérer les contenus dans la Grille

Une fois la Grille de mise en page définie, vous pouvez saisir un Objet en sélectionnant l'icône qui le représente dans la liste des Objets disponibles et le glisser-déplacer dans la cellule qu'il doit occuper.

Chaque Cellule de la Grille de mise en page peut contenir un seul Objet, mais un objet peut s'étendre sur plusieurs Cellules adjacentes, à la fois horizontalement et verticalement. L'icône de l'Objet sélectionné peut être glissée le long des bords des Cellules: dans ces cas, l'Objet occupera l'espace des Cellules intéressées. En outre, il est possible agir sur les ancres de sélection de l'Objet inséré pour l'étendre sur plus de Cellules.

Une fois défini le nombre de Cellules qui doivent être occupés par un Objet, ceci sera maintenu, compatible avec la présence d'autres Objets, même si l'Objet est déplacé vers d'autres parties de la Grille. Pour votre commodité, vous pouvez travailler sur la Grille à l'aide des touches flèches:

§touches flèches: permettent de déplacer la sélection d'une Cellule à une autre de la Grille de mise en page.

§CTRL + touches flèches: permettent de déplacer l'Objet sélectionné (gardent les dimensions) entre les Cellules de la Grille de mise en page.

§Maj + touches flèches: permettent de modifier les dimensions de l'Objet sélectionné en étendant (compatible avec les autres Objets présents) ou compressant sur un nombre différent de Cellules de la Grille de mise en page.

En cliquant avec le bouton droit de la souris sur l'icône de l'Objet inséré dans une Cellule, ou dans une Cellule vide de la Grille de mise en page, un menu contextuel est rappelé avec les commandes Couper, Copier, Coller, Supprimer, Propriétés de la Cellule, Insérer une ligne, Insérer une colonne, Supprimer une ligne et Supprimer une colonne.

Ces commandes peuvent, par exemple, créer une copie d'un Objet en le collant dans une autre Cellule ou dans une autre Page, ou le supprimer. Un Objet inséré peut être supprimé de la Page en le faisant glisser en dehors de la Grille de mise en page ou par la touche SUPPR. Dans tous les cas, en insérant un nouvel Objet dans une Cellule déjà occupée, vous obtenez automatiquement la suppression du premier Objet et il est remplacé par le second. Toutefois, si vous faites glisser un Objet qui existe déjà sur une cellule déjà occupée, les deux objets échangent leur position.

Les commandes Copier style et Coller style, dans le sous-menu appelé par la commande Style de Cellule, vous permettent de vous assurer que les paramètres de la fenêtre Style de cellule pour une Cellule seront automatiquement appliqués à une deuxième Cellule.

Une fois inséré un Objet, vous pouvez appeler la fenêtre qui permet effectivement de procéder à la définition de son contenu (Objet Texte, Objet Image, Objet Tableau, Objet de la galerie, Objet Vidéo/Son, Objet Formulaire d'envoi d'email, Objet Livre d'or, Objet Réseau Social, Objet Carte, Objet Animation Flash, Objet Liste des produits, Objet HTML et Widgets), en double cliquant sur la Cellule de la Grille de mise en page qui la contient ou en appuyant sur le bouton [image] Contenu Objet.

Il n'est pas obligatoire de remplir toutes les Cellules de la Grille de mise en page: il faut tenir compte, cependant, qu'une Cellule vide correspond à un espace vide dans la Page.

Afin de mieux comprendre comment exploiter au mieux les possibilités de mise en page, il faut remarquer que le fonctionnement du logiciel doit respecter les règles suivantes:

§La largeur de la Page est déterminée par le Modèle.

§La largeur des colonnes de la Grille de mise en page est obtenue en divisant la largeur de la Page par le numéro des colonnes insérées. Par défaut, toutes les colonnes ont la même largeur mais il est ensuite possible modifier ce paramètre manuellement.

§Toutes les Cellules dans la même ligne de la Grille de mise en page ont la même hauteur: par défaut, cette valeur est déterminée à partir de l'Objet le plus haut parmi ceux contenus dans les mêmes Cellules.

§Les Objets insérés sont automatiquement redimensionnés sur la base de la taille des Cellules de la Grille de mise en page.

Approfondissements:

-

Le Box Model dans WebSite X5


Comment travailler sur le Style de cellule

Bonnes pratiques > Étape 3 - Création de la page >

Comment travailler sur le Style de cellule

 Return to chapter overview
Montrer/Cacher le texte caché

En travaillant à la Création de la page, après que vous ayez glissé un des Objets disponibles dans une Cellule de la Grille de mise en page, il est possible de définir l'aspect graphique de la Cellule même en cliquant sur le bouton [image] et en utilisant les options proposées dans la fenêtre Style de cellule appelée.

Cliquez pour etendre/reduire En pratique: Comment créer une image de fond qui s'adapte aux dimensions de la Cellule

L'aspect de la Cellule peut être personnalisé de différentes façons: entre autre il est possible d'importer une image (fichier dans le format .JPG, .GIF, .PNG) et de l'utiliser comme fond de la Cellule même. Selon le type d'image importée il sera nécessaire de choisir l'option Arrière-plan image, définir les différents paramètres pour les éléments Disposition et Alignement, ou utiliser l'option Ajuster à la cellule, pour réussir à obtenir le meilleur résultat.

Exemple 1

L'image importée a les mêmes dimensions que la Cellule.

Arrière-plan : Arrière-plan image

Disposition: Ne pas répéter

Alignement: Haut - Gauche

Cliquez pour etendre/reduire

Exemple 2

L'image importée est un modèle, ou une image créée de telle sorte qu'en la répétant, à la fois horizontalement et verticalement, vous ne remarquez pas de points de conjonction.

Arrière-plan : Arrière-plan image

Disposition: Mosaïque

Alignement: Haut - Gauche

Cliquez pour etendre/reduire

Exemple 3

L'image importé est celle importée d'un cadre qui doit s'adapter à des Cellules de tailles différentes.

Arrière-plan : Ajuster à la cellule

Largeur bloc / Hauteur bloc : définir la taille des blocs la plus appropriée.

Cliquez pour etendre/reduire

Pour mieux comprendre comment fonctionne le Ajuster à la cellule, qu'est ce que sont les blocs et comment en définir correctement la taille, considérez les images suivantes:

Image 1 | Image 2 | Image 3

L'image originale (image 1) montre un cadre très élaboré, mais qui est bien adapté pour être découpé en blocs et pour s'adapter à n'importe quelle dimensions que puisse avoir la Cellule: les éléments décoratifs ajoutés dans les coins occupent, en effet, une surface bien définie et facilement délimitable et toutes les nuances peuvent être répétées aussi comme un modèle sans provoquer de brusques changements de teinte.

Dans l'image 2 on peut voir les blocs dont vous devez définir les dimensions (options Largeur bloc et Hauteur bloc ). Les valeurs de largeur et de hauteur des blocs (tous égaux les uns aux autres) sont définis en pourcentage par rapport à la largeur et hauteur de l'image originale et peuvent varier entre 5% et 45%. Dans ce cas, il est nécessaire de définir la dimension de la coupe à 35% pour les deux côtés des blocs afin qu'ils comprennent complètement l'image positionnée sur les coins.

Comme on le voit dans l'image 3, en identifiant les blocs A, B, C, D il est possible de déduire les autres 5 sections, a, b, c, d, e: ce sont les coupes qui sont faites par le Programme pour déduire de l'image d'origine toutes les images nécessaires pour composer le fond de la Cellule. Ainsi, alors que les images correspondantes aux blocs A, B, C, D sont maintenues telles quelles sont et simplement placées dans les coins, les images correspondantes aux sections, a, b​​, c, d, e sont répétées de façon à remplir tout l'espace nécessaire.

Comme il est facile de comprendre, cette procédure permet une grande flexibilité: à partir d'une seule image bien réalisée, en effet, vous pouvez résoudre l'aspect des Cellules dont les dimensions sont très différentes entre elles.

Cliquez pour etendre/reduire En pratique: Comment utiliser la Librairie des Styles de la Cellule

Grâce à la Bibliothèque, vous pouvez réduire le temps nécessaire: si vous prévoyez de définir les même paramètres graphiques à plusieurs Cellules, il est préférable de définir la première Cellule, enregistrer ensuite le style et l'appliquer, sans avoir à le recréer à chaque fois, aux autres Cellules.

Pour créer un nouveau Style:

§Dans la Grille de mise en page sélectionnez la Cellule que vous voulez modifier et cliquez sur le bouton [image] pour appeler la fenêtre Style de cellule.

§Utilisez les options mises à disposition dans les différentes sections Style et Textes pour obtenir le résultat souhaité.

§Ouvrez la section Bibliothèque et cliquez sur le bouton Ajouter: selon les paramètres définis un nouveau Style est créé. Un' Aperçu du Style créé est ajouté à la liste des Styles Personnalisé.

Pour appliquer un Style:

§Dans la Grille de mise en page sélectionnez la Cellule que vous voulez modifier et cliquez sur le bouton [image] pour appeler la fenêtre Style de cellule.

§Ouvrez directement la section Bibliothèque et sélectionnez l'aperçu du Style que vous voulez utiliser, en choisissant dans la liste des Styles Présélections ou dans celle des Styles Personnalisé.

§Cliquez sur le bouton Appliquer.

Approfondissements:

-

Le Box Model dans WebSite X5


Comment créer un Site multilingue

Bonnes pratiques > Étape 4 - Paramètres avancés >

Comment créer un Site multilingue

 Return to chapter overview
Montrer/Cacher le texte caché

Internet vous permet de dépasser les frontières nationales et, s'il est prévu que le Site sera consulté par des personnes de nationalités différentes, il est préférable de laisser le choix entre plusieurs Langues.

Gérer un Site en plusieurs Langues ajoute un certain degré de complexité au Projet, mais grâce aux fonctions fournies par WebSite X5 et en s'appuyant sur un service de traduction de qualité, cette tâche peut être menée à bien avec succès.

Tout d'abord, il faut préciser que WebSite X5 génère tous les fichiers HTML pour les pages d'un Site à l'aide du Codage UTF-8 (Unicode Transformation Format 8 bits) des caractères. En utilisant UTF-8, il est possible de réaliser des Sites dans n'importe quelle Langue, y compris celles qui utilisent un alphabet différent du Latin comme, par exemple, le grec, le cyrillique, le copte, l'arménien, l'hébreu et l'arabe, sans oublier le chinois, le japonais et le coréen. En outre, non seulement vous pouvez créer un Site dans n'importe quelle langue, mais il est également possible de fournir des textes en différentes langues sur le même site, sans avoir de problèmes pour afficher les caractères: par exemple, on pourrait penser tranquillement à un texte en russe avec à coté une traduction en italien.

Avançant dans la création d'un Site, WebSite X5 vous permet, en premier lieu, d'associer une Langue au Projet (dans la Paramètres généraux | Générales option Langue du contenu): ce passage est indispensable pour une correcte gestion des textes qui sont insérés automatiquement dans le Programme. En plus de certaines Langues déjà installées, vous pouvez accéder à la fenêtre Gestion du contenu linguistique en cliquant sur le bouton [image] pour créer/importer plus de Langues ou modifier les éléments de celles qui sont déjà présentes (voir, Comment gérer les Langues pour les textes insérés automatiquement).

Enfin, WebSite X5 permet de créer un Site multilingue où le Visiteur a la possibilité de choisir la Langue qu'il préfère parmi celles disponibles. Dans ce cas, vous avez juste à créer un Projet pour chaque Langue et les relier entre eux comme si ils étaient différentes sections d'un seul Site web. Les méthodes pour relier les Projets entre eux, qui ne diffèrent que par leur Langage, sont principalement deux: le première exploite la Page d'accueil, la deuxième peut insérer des liens directement dans l'En-tête du modèle.

Cliquez pour etendre/reduire En pratique: Comment créer un Site multilingue par la Page d'accueil

En supposant que vous vouliez créer un Site disponible en Italien, Anglais et Portugais, vous pouvez utiliser la Page d'accueil pour insérer des boutons qui permettent au Visiteur de choisir la Langue d'affichage du contenu.

§En premier lieu, vous devez créer le Site en Italien en définissant la structure et les contenus et dans Paramètres généraux | Générales définir "IT - Italian" comme Langue du contenu.

§À l'étape 4 - Paramètres avancés cliquez sur le bouton Page d'accueil et, dans la fenêtre relative, activez l'option Afficher la page d'accueil et spécifiez quelle image/animation afficher comme Arrière-plan de la page et fixez tous les paramètres nécessaires pour donner l'aspect voulu.

§Pour créer les boutons pour le choix de la Langue, activez l'option Afficher les liens vers d'autres langues.

§À travers les commandes disponibles, composez la Liste de langues. À partir de la liste proposée, sélectionnez les éléments "Deutsch", "Español" et "Français", relatives à des Langues non prévues, et cliquer sur le bouton Supprimer. Cliquez ensuite sur le bouton Ajouter... pour appeler la fenêtre Sélection des langues et ajouter la Langue Portugaise: comme Nom de la langue à afficher entrez "Português" et importez un fichier pour l'image associée.

§De la même manière, sélectionnez les éléments "Italiano" et "English" et cliquez sur le bouton Modifier... pour appeler la fenêtre Sélection des langues et ajouter les images manquantes des drapeaux.

§Du moment que le Projet actuel est celui en Italien (le seul auquel sera associé la Page d'Accueil), sélectionnez l'élément "Italiano" depuis la Liste de langues et cliquez sur le bouton Présélection.

§Une fois insérées les images des drapeaux des langues, vous devez mettre en place les liens. En supposant que vous allez créer un Site pour chaque langue et que vous allez le publier en ligne, vous pouvez fournir un lien vers une URL:

§Dans la Liste de langues sélectionner l'élément "English" et cliquer sur le bouton Modifier... pour appeler la fenêtre Sélection des langues.

§Cliquez sur le bouton [image] disponible pour l'option Lien pour cette langue (ex: afficher le site dans cette langue) et, dans la fenêtre Lien appelée, sélectionnez l'action Fichier ou URL et spécifiez l'adreasse du Site en Anglais: par exemple, http://www.monsite.fr/en/index.html, si vous prévoyez de publier le Site en Anglais dans le sous répertoire "en" dans le répertoire principale du Serveur.

§Répétez les mêmes opérations pour le Site en Portugais le connectant à l'URL relative: par exemple, http://www.monsite.fr/pt/index.html , si vous prévoyez de publier le Site en Portugais dans le sous répertoire "pt" dans le répertoire principale du Serveur.

À ce point, le Site est prêt pour permettre le choix de la Langue mais il manque encore les contenus liés à la langue anglaise et la langue portugaise.

§Pour procéder plus rapidement à la création du Site en langue anglaise, créez une copie du Site en italien: dans la fenêtre initiale Choix du projet sélectionnez le Projet du Site en italien et cliquez sur le bouton Dupliquer. Cliquez ensuite sur le bouton Renommer pour modifier le nom du nouveau Projet.

§Ouvrez la copie du Projet et dans Paramètres généraux | Générales définissez "EN - English" comme <z S1_GENSET_LBLCONTENTLANGUAGE%>: procédez en insérant les traductions pour tous les textes et les éléments qui éventuellement dépendent de la Langue.

§À l'étape 4 - Paramètres avancés, accédez à la fenêtre Page d'accueil et désactivez l'option Afficher la page d'accueil.

§Une fois le Site en Anglais terminé, répétez la même procédure pour prédisposer le Projet du Site en Portugais.

Pour la publication sur Serveur des Sites réalisés, procédez comme suit:

§Publication du Site en Italien: le Site en Italien est celui qui est associé à la Page d'Accueil et a été défini comme "par défaut". En procédant à la publication le fichier index.html est créé, correspondant à la Page d'Accueil, et enregistré dans le répertoire de publication. Pour se conformer aux URL configurées pour les Sites en Anglais et en Portugais, il est nécessaire de créer sur le Serveur les sous répertoires: "en" et "pt". Cette étape terminée, le Site italien sera en ligne et dans la Page d'Accueil seront actives les connexions sur les boutons de la Langue, qui ne mènent encore à rien.

§Publication du Site en Anglais: afin que le lien présent dans la Page d'Accueil au Site en Anglais fonctionne, publiez le Projet dans le sous répertoire "en" créé.

§Publication du Site en Portugais: de la même manière, afin que le lien présent dans la Page d'Accueil au Site en Portugais fonctionne, publiez le Projet dans le sous répertoire "pt" créé.

Une fois publiés tous les trois Sites dans les bons sous répertoires, les boutons présents dans la Page d'Accueil fonctionneront correctement et permettront aux Visiteurs de consulter les contenus du Site dans leur Langue.

À travers l'option Lien pour cette langue (ex: afficher le site dans cette langue) présente dans la fenêtre Sélection des langues il est possible de définir n'importe quelle action sur les images associées aux Langues (dans la plupart des cas, les drapeaux). Cela signifie que au lieu de connecter un Site entier comme le montre l'exemple, vous pouvez connecter une simple Page entière ou un message d'information expliquant que le Site dans une Langue qui n'est pas encore disponible mais le sera bientôt, ou un document PDF avec toutes les informations que vous souhaitez offrir pour une Langue, ou mettre en œuvre d'autres solutions encore selon le cas.
Cliquez pour etendre/reduire En pratique: Comment créer un Site multilingue par des boutons dans l'En-tête du Modèle

Toujours en supposant de vouloir créer un Site disponible en Italien, Anglais et Portugais, un mode alternatif ou complémentaire à la Page d'accueil pour présenter les Boutons pour le choix de la Langue est de les mettre dans l'En-tête du Modèle du Site. Cette méthode offre l'avantage de donner au Visiteur la possibilité de changer la Langue de consultation à tout moment et à partir de n'importe quelle Page du Site.

§Tout d'abord, vous devez créer le site en Italien et définir la structure et son contenu, et dans Paramètres généraux | Générales définissez "EN - Anglais" comme Langue du contenu.

§Accédez à la fenêtre Modifier le modèle pour agir sur l'En-tete et créez les boutons qui permettront au Visiteur de choisir la Langue de consultation.

§À travers le bouton [image] Insérer image, importez le fichier graphique relatif à l'image d'un drapeau italien: si vous voulez créer un bouton avec un effet de mouseover, utilisez l'option Fichier image au passage de la souris pour importer une deuxième image, légèrement différente de la première.

§Répétez cette procédure pour créer les Boutons avec les drapeaux Anglais et Portugais.

§Sélectionnez le Bouton avec le drapeau Anglais et cliquez sur la commande [image] Associer un lien: dans la fenêtre Lien appelée choisissez l'action Fichier ou URL et activez l'option Fichier Internet en tapant l'adresse à laquelle sera joignable la Page d'Accueil du Site Anglais une fois qu'il est en ligne (par exemple: http://www.monsite.fr/en/index.html).

§Répétez la même procédure pour les Boutons de la Langue Portugaise et créez le lien à la URL relative (par exemple: http://www.monsite.fr/pt/index.html).

Évidemment, puisque vous travaillez sur le Projet du Site Italien vous n'avez pas besoin d'insérer aucun lien sur le Bouton avec le drapeau italien.

§Pour procéder plus rapidement à la création du Site en langue anglaise, créez une copie du Site en italien: dans la fenêtre Choix du projet sélectionnez le Projet du Site en Italien et cliquez sur le bouton Dupliquer. Puis cliquez sur le bouton Renommer pour modifier le nom du nouveau projet.

§Ouvrez la copie du Projet et dans Paramètres généraux | Générales définissez "EN - English" comme Langue du contenu: procédez en insérant les traductions pour tous les textes et les éléments dépendant de la Langue.

§Accédez à la fenêtre Modifier le modèle et placez les liens sur les Boutons avec des drapeaux: associez celui de l'Italien au lien avec la URL relative (par exemple: http://http://www.monsite.fr/index.html) et supprimez le lien du Bouton avec le drapeau anglais.

§Une fois que le Projet du Site en Anglais est terminé, répétez la même procédure pour définir le Projet du Site en Portugais. Dans ce cas, vous devez mettre en place des liens sur les Boutons associés aux Langues Italien et Anglais et supprimer celui relatif à la Langue Portugaise.

Pour que les boutons créés pour le choix de la Langue fonctionnent correctement, il est nécessaire que les Sites dans les trois Langues soient publiés sur le Serveur en respectant les chemins attendus.

§Créez dans le répertoire de publication sur le Serveur deux sous répertoires et appelez-les: "en" et "pt".

§Publiez le Projet en Italien (considéré comme le Projet principal) dans le répertoire principal sur le Serveur et les Projets des Sites en Anglais et Portugais dans les sous répertoires "en" et "pt".

Approfondissements:

-

Comment gérer les Langues pour les textes insérés en automatique


Comment gérer les commentaires depuis le Panneau de Contrôle en ligne

Comment gérer les commentaires des Blog et Livre d'Or du panneau de contrôle en ligne

Bonnes pratiques > Étape 4 - Paramètres avancés >

Comment gérer les commentaires des Blog et Livre d'Or du panneau de contrôle en ligne

 Return to chapter overview
Montrer/Cacher le texte caché

Un Blog est un genre d'agenda en ligne où il est possible publier des articles sur différents sujets et donner la possibilité aux lecteurs de laisser des commentaires.

Si la communauté des lecteurs est active et correctement stimulée par la qualité des articles, vous pouvez développer des discussions intéressantes sur un sujet.

Cliquez pour etendre/reduire En pratique: Comment configurer la géstion des commentaires WebSite X5

Pour donner la possibilité aux Lecteurs de laisser un commentaire sur les articles publiés, vous devez avant tout configurer le Blog en utilisant les options présentes dans Blog | Commentaires. En particulier:

§Activez l'option Permettre l'entrée des commentaires pour les articles du blog.

§Spécifiez le parcours du Dossier du serveur avec l'accès par écriture, ou le répertoire dans lequel le code PHP est autorisé à accéder au fichier en écriture.

§Décidez si activer le contrôle anti-spam "Captcha" pour insérer les Commentaires.

§Spécifiez Destination adresse e-mail, ou l'adresse e-mail où on souhaite recevoir les e-mails qui sont envoyées automatiquement pour informer qu'un Lecteur a laissé un nouveau commentaire.

§Spécifiez si les commentaires peuvent être publiés en ligne immédiatement ou si ils doivent être soumis à approbation.

Une fois ceci fait, vous pouvez procéder à la mise en place des articles et à la publication du Blog. En bas des articles du Blog un formulaire est automatiquement inséré où les lecteurs peuvent composer et envoyer leurs commentaires. Dans ce formulaire il faut insérer: Nom, E-mail, Site Web et Message. À l'exception du site Web, tous les champs sont obligatoires.
Cliquez pour etendre/reduire En pratique: Comment gérer les commentaires à travers le Panneau de Contrôle en ligne

Une fois configurée la gestion des commentaires du Blog comme ci-dessus, quand un Lecteur laissera un commentaire, un e-mail est créé automatiquement et il est envoyé à l'adresse e-mail indiquée. Si vous avez activé l'option Afficher commentaires après l'approbation dans le panneau de contrôle, afin que le commentaire apparaisse en ligne au bas de l'article, il doit d'abord être approuvé par la commande appropriée dans le Panneau de Contrôle qui est créé automatiquement par WebSite X5.

Le Panneau de Contrôle est disponible à l'URL http://www.monsite.fr/admin, où http://www.monsite.fr est l'URL du Site auquel est lié le Blog, et il est disponible pour tous les Utilisateurs qui sont insérés dans le Groupe Administrateur dans la section Géstion des Accès disponible à l'étape 4 - Paramètres avancés.

Dans la section Blog du Panneau de Contrôle, il y a deux menus déroulants qui offrent une liste des catégories et des articles qui leur sont associés. Dans ces menus, vous pouvez identifier l'article pour lequel vous souhaitez afficher les commentaires reçus. Ensuite, la liste des commentaires est présentées: pour chaque commentaire est indiqué l'auteur, son adresse e-mail, le texte du commentaire, la date et l'heure d'envoi. Si l'information est disponible, sur le nom de l'auteur est automatiquement inséré le lien vers son Site Web.

Pour accéder à la gestion des commentaires:

§Accédez au Panneau de Contrôle en ligne et authentifiez-vous et, enfin, ouvrez la section Blog.

§Identifiez l'article donc vous voulez afficher les commentaires par les menus déroulants qui vous proposent la liste des catégories prévues et les articles insérés.

§Faites défiler la liste des commentaires reçus pour l'article sélectionné et gérez l'affichage des commentaires sur le Blog par les commandes:

-Supprimer: pour supprimer le commentaire inséré qui ne sera pas publié dans le Blog et sera éliminé de la liste des commentaires dans le Panneau de Contrôle.

-Approuver/désapprouver: pour approuver un commentaire et donc permettre qu'il soit affiché dans le Blog ou le désapprouver pour le supprimer de la liste des articles affichés dans le Blog. Un commentaire désapprouvé n'est pas supprimé des listes présentées dans le Panneau de Contrôle.

Avoir la possibilité de gérer l'affichage des commentaires dans le Blog est indispensable pour se protéger contre le spam et pour modérer les discussions afin d'éliminer les messages jugés offensants, non en accord avec le sujet ou le style que vous souhaitez conserver.


Comment définir les contenus de l'e-mail de confirmation de la Commande

Bonnes pratiques > Étape 4 - Paramètres avancés > Panier virtuel e-commerce >

Comment définir les contenus de l'e-mail de confirmation de la Commande

 Return to chapter overview

Une fois la commande achevée, il est important que le Client reçoive en retour une confirmation par e-mail avec laquelle il peut s'assurer qu'il a tout fait correctement et recevoir les informations nécessaires pour effectuer le paiement.

WebSite X5 compose automatiquement le message de confirmation de commande, en prenant uniquement les informations pertinentes, en fonction des choix effectués par le Client lors de la compilation de la Commande.

Plus précisément, la confirmation par e-mail de la commande est composée comme suit:

Texte d'introduction
Description: | C'est le texte initial: il devrait contenir un remerciement pour l'achat effectué et anticiper le contenu qui va suivre.
Exemple: | Cher/chère client(e), Nous vous remercions de votre achat. Nous vous transmettons un récapitulatif de votre commande Vous trouverez ci-dessous la liste des produits commandés, les informations de facturation et les instructions concernant la livraison et le paiement choisi.
Où définir: | Dans Panier virtuel e-commerce | Envoyer la commande, à travers le champ Texte d'en-tête .
Données de l'Utilisateur
Description: | C'est la partie où s'affichent les informations de facturation indiquée par le Client par le formulaire de commande.
Où définir: | Le Formulaire de Commande peut être rempli dans Panier virtuel e-commerce | Détails client.
Résumé Commande
Description: | Il s'agit d'une table qui résume les Produits commandés: indique la quantité et le montant pour chaque Produit et le prix total de la Commande.
Où définir: | Rien à définir en particulier: la table avec le résumé est créée automatiquement en fonction de la Commande.
Méthode de Paiement
Description: | Il est nécessaire de prévoir, en fonction de la méthode choisie par le Client, les instructions et les informations utiles pour lui permettre d'effectuer le paiement.
Exemple: | Pour la Méthode de Paiement "Virement Bancaire": Les données requises pour le paiement par virement bancaire sont les suivantes : XXX YYY ZZZ Remarque : au terme du paiement, il est nécessaire d'envoyer une copie du reçu avec le Numéro de la commande.
Où définir: | Dans la section Message e-mail Dans la section Type de paiement.
Méthode d'Expédition
Description: | Il est conseillé de rappeler au Client la méthode d'expédition qu'il a choisie et de lui fournir, si possible, des informations sur les délais et modes de livraison, ainsi que toute autre information utile.
Exemple: | Pour la Méthode d'Expédition "Courrier": Expédition par Courrier. Les produits seront livrés dans 1-2 jours.
Où définir: | Dans la section Message e-mail Dans la section Type de livraison.
Texte de fermeture
Description: | Il s'agit de la formule de fermeture où vous exprimez votre disponibilité et vous saluez poliment en signant.
Exemple: | Nous contacter pour obtenir de plus amples informations. Nos meilleures salutations, Service commercial.
Où définir: | Dans Panier virtuel e-commerce | Envoyer la commande, à travers le champ Texte de pied de page .

Comme pour tous les e-mail émis automatiquement par le Programme, le style graphique défini dans Styles et modèles | E-mail est aussi appliqué à l'e-mail de la confirmation de la Commande.

L'e-mail de confirmation de la Commande est envoyé au format texte également.

Bonnes pratiques:

-

Comment importer/exporter les Produits du Panier


Comment importer/exporter les Produits du Panier

Bonnes pratiques > Étape 4 - Paramètres avancés > Panier virtuel e-commerce >

Comment importer/exporter les Produits du Panier

 Return to chapter overview

Après avoir créé un Panier e-commerce, il peut être utile d'être en mesure d'exporter le catalogue de Produits de sorte que, par exemple, vous pouvez l'entrer dans un autre Projet ou vous pouvez l'utiliser dans un autre logiciel, peut-être dédié à la gestion de la facturation. Dans le sens inverse, bien sûr, il est tout aussi important d'être en mesure d'importer la liste des Produits pour n'avoir pas à la recréer à partir de zéro.

Dans WebSite X5 vous pouvez accomplir ces tâches Importer / Exporter en utilisant les commandes appropriées dans la Barre d'Outils de la fenêtre Panier virtuel e-commerce | Produits. L'exportation du catalogue des Produits génère un fichier. TXT ou .CSV qui peuvent être facilement ouverts et modifiés avec un éditeur de texte standard (par exemple, Bloc-notes Windows) ou Microsoft Excel.

Pour modifier manuellement le fichier obtenu de l'exportation du Catalogue des Produits ou pour en créer un nouveau à importer, il faut respecter les règles suivantes:

§La première ligne doit contenir l'en-tête des champs et doit comporter les indications suivantes:

ID;Category;Name/Code;Description;Price;Enable VAT;VAT Value;Weight;Options;Enable Discounts;Discounts

§Si vous éliminez un champ de l'en-tête vous éliminez cette donnée pour tous les Produits. Naturellement, les champs obligatoires Category, Name/Code, Description et Price ne peuvent pas être supprimés de l'en-tête.

§Chaque ligne, après l'en-tête, doit correspondre à un Produit;

§Tous les paramètres doivent être séparés par le caractère ";".

§Pour chaque Produit il faut indiquer obligatoirement: le nom de la Catégorie, le nom du Produit, la description du Produit, le prix du Produit. Tous les autres champs sont optionnels et peuvent être omis (simplement en n' insérant aucune description entre les caractère ";" pour le champ en question).

§L'ID du Produit est créé par le Programme et non manuellement: si vous insérez un nouveau Produit il est normal de laisser vide le champ de l'ID.

§Les espaces insérés, si ils ne sont pas nécessaires, seront automatiquement supprimés pendant l'importation.

Plus précisément, les paramètres dans le fichier .TXT ou .CSV sont:

Paramètre: ID

Obligatoire

Non

Description

C'est un identifiant unique pour le Produit.

Valeur

Il est automatiquement créé et associé au Produit par le programme.

Pour mettre à jour le fichier .TXT ou .CSV obtenu par exportation, il est déconseillé de modifier les ID déjà affectés et laisser le champ vide pour les éventuels nouveaux produits ajoutés. Si vous créez de zéro un fichier .TXT ou .CSV, pour importer le catalogue dans le panier, vous ne devez pas créer manuellement les ID des produits. En effet, en phase d'importation, le programme confronte les ID pour ne pas avoir de duplicatas et génère ceux qui manquent.

Paramètre: Category

Obligatoire

Oui

Description

C'est la Catégorie où est inséré le Produit.

Valeur

Vous pouvez reproduire le chemin de catégories et sous-catégories en utilisant le caractère ">".

Par exemple, si le produit est un T-shirt inséré dans le catalogue à la sous-catégorie "Casual" de la catégorie "Vêtements pour homme", dans le fichier .TXT ou .CSV vous pouvez indiquer le chemin comme suit:

... ; Vêtements pour homme > Casual ; ...

Avec ce type de remarque, vous pouvez insérer toutes les sous-catégorie nécessaires.

Paramètre: Name/Code

Obligatoire

Oui

Description

C'est le Nom ou le Code assigné au Produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par le champ Nom/Code de la fenêtre Paramètres de produit | Général.

Paramètre: Description

Obligatoire

Oui

Description

C'est la description associée au Produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par le champDescription de la fenêtre Paramètres de produit | Général.

Paramètre: Price

Obligatoire

Oui

Description

C'est le prix associé au Produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par le champ Prix de la fenêtre Paramètres de produit | Général.

Paramètre: Enable VAT

Obligatoire

Non

Description

Indique si l'application d'une TVA particulière a été prévue pour le produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par l'option TVA (%) de la fenêtre Paramètres de produit | Général. Cette option est disponible seulement si dans Panier virtuel e-commerce | Disponibilité vous avez sélectionné l'option Type "TVA incluse dans le prix" pour les Paramètres TVA et elle permet d'associer au Produit une TVA particulière, différente de celle des autres Produits du catalogue. Dans ce cas, les prix sont indiqués hors taxe.

Ce paramètre peut prendre seulement deux valeurs: 0 ou 1, respectivement si vous avez ou n'avez pas sélectionné l'option TVA (%) indiquée ci-dessus.

Paramètre: VAT Value

Obligatoire

Non

Description

C'est la valeur de la TVA quand est prévue l'application d'une taxe particulière sur le prix du produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par l'option TVA (%) de la fenêtre Paramètres de produit | Général qui, tel que pour le paramètre précédent, est disponible seulement si dans Panier virtuel e-commerce | Disponibilité vous avez sélectionné l'option Type "TVA incluse dans le prix" pour les Paramètres TVA .

Si l'option TVA (%) de la fenêtre Paramètres de produit | Général est sélectionnée mais qu'aucune valeur n'est spécifiée, le programme prend la Valeur par défaut (%) définie dans la section Paramètres de produit | Disponibilité.

Paramètre: Weight

Obligatoire

Non

Description

C'est le poids associé au produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par le champ Poids de la fenêtre Paramètres de produit | Général.

Paramètre: Options

Obligatoire

Non

Description

C'est la liste des variantes pour le Produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par le champ Liste des Options Principales de la fenêtre Paramètres de produit | Options..

Si vous créez un fichier .TXT ou .CSV à importer, la liste des variantes de produit peut être introduite en utilisant le caractère "|", comme suit:

... ; Variante1 |Variante2| Variante3; ....

Avec ce type de remarque, vous pouvez insérer toutes les variantes nécessaires.

Paramètre: Enable Discounts

Obligatoire

Non

Description

Indique si une remise sur la quantité est prévue pour le produit.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris par l'option Activer la remise quantité de la fenêtre Paramètres de produit | Remise.

Ce paramètre peut prendre seulement deux valeurs: 0 ou 1, respectivement si vous avez ou n'avez pas sélectionné l'option Activer la remise quantité indiquée ci-dessus.

Paramètre: Discounts

Obligatoire

Non

Description

C'est la liste des remises sur la quantité à appliquer au produit, si elles sont prévues.

Valeur

En cas d'exportation du catalogue dans .TXT ou .CSV, ce paramètre est repris, comme le précédent, par l'option Activer la remise quantité de la fenêtre Paramètres de produit | Remise.

Si vous créez un fichier .TXT ou .CSV à importer, la liste des remises sur la quantité à appliquer doit être composée en respectant la remarque suivante:

... ; quantité : remise| quantité : remise ; ...

Ainsi, si pour des commandes dépassant les 20 pièces, on a prévu une remise de 10% et pour les commandes de plus de 50 pièces, il y a une remise de 15%, il faut insérer les données en écrivant:

... ; 20: 10| 50: 15 ; ...

En utilisant le caractère "|", vous pouvez insérer toutes les remises sur la quantité nécessaires.

Après avoir importé un fichier .TXT ou .CSV obtenu à partir d'une exportation précédente ou créé manuellement, il est très probable qu'il soit mis à jour par le programme: par exemple, en insérant les ID des Produits qui manquent. Pour cette raison, si vous voulez avoir une copie à jour du fichier .TXT ou .CSV il est nécessaire de procéder à une neuvelle exportation du Catalogue Produits.

Bonnes pratiques:

-

Comment définir les contenus de l'e-mail de confirmation de la Commande


Les navigateurs Web & le Navigateur de WebSite X5

Les Navigateurs & le Navigateur de WebSite X5

Approfondissements >

Les Navigateurs & le Navigateur de WebSite X5

 Return to chapter overview
Montrer/Cacher le texte caché

Un navigateur est une application logicielle permettant à l'utilisateur d'afficher et d'interagir avec les informations (textes, images, etc.) présentes dans une page Web. On dispose actuellement de nombreux navigateurs dont les plus connus sont Microsoft Explorer®, Firefox®, Safari® et Google Chrome™.

Pour afficher les contenus Web, les navigateurs exploitent un moteur de rendering, à savoir un logiciel qui, après avoir téléchargé les contenus (par exemple une page HTML) formate les informations relatives (par exemple, les CSS reliés) et les affiche sur l'écran. Des navigateurs différents exploitent des moteurs de rendering différents qui se différencient pour leur qualité de rendering par rapport au standard et leur vitesse. Il en dérive qu'une Page Web peut apparaître d'une manière très différente selon le navigateur utilisé. En tout cas, comme la page Web n'est pas une page imprimée, une certaine marge de variations est acceptable à condition que l'expérience d'emploi de la part de l'utilisateur ne soit pas entravée.

La meilleure façon d'obtenir des pages Web compatibles avec les principaux navigateurs, dans leurs versions différentes, est de créer un code autant que possible propre et conforme au standard.

WebSite X5, en créant automatiquement un code HTML5 avec CSS 2.1 ou 3 reliés, est en mesure de garantir la pleine compatibilité avec tous les principaux navigateurs mais aussi avec les dispositifs mobiles comme les portables, les ordinateurs de poche et les smartphones.

Cliquez pour etendre/reduire Navigateur interne de WebSite X5

Lors du développement d'un Projet, il faut pouvoir vérifier quel sera le résultat final et comment sera affiché le Site en ligne. Pour cela, WebSite X5 permet de rappeler, à l'aide du bouton Aperçu toujours disponible (voir Environnement de Travail), un Aperçu du Site continuellement à jour (voir Gardez l'Aperçu actualisé tout en travaillant au projet dans la fenêtre Préférences).

Pour afficher l'Aperçu, WebSite X5 utilise son navigateur interne qui exploite le moteur de Chromium (http://www.chromium.org/), le navigateur open source qui est la base de Google Chrome™. Ce navigateur interne présente les commandes suivantes:

Précedent

Permet de revenir à la page précédente.

Suivant

Permet de passer à la page suivante et d'ouvrir de nouveau une page déjà visitée.

Page initiale

Permet de revenir à la page d'accueil du site.

Barre d'adresse

Indique le chemin de la page affichée et/ou permet d'indiquer le chemin de la page à afficher.

Aller

Permet de lancer le téléchargement de la page en suivant le chemin saisi dans la barre d'adresse. Vous pouvez également confirmer l'adresse saisie appuyant la touche ENTRÉE.

Modifier cette page

Permet de revenir au programme, en ouvrant la Page affichée dans l'aperçu du navigateur directement dans le fenêtre Création de la page pour la modifier. Si les pages appartiennent au Blog, à la Zone Réservée ou au Panier virtuel e-commerce, ce bouton permet de revenir à la section relative de Étape 4 - Paramètres avancés.

Il faut signaler que la fenêtre du navigateur étant ouverte, pour obtenir l'aperçu du Projet sur lequel vous êtes en train de travailler, la page affichée change automatiquement en fonction de la page courante. Cela signifie que si vous passez à une page différente pour y travailler, celle-ci sera ouverte dans l'aperçu du navigateur.

L'utilisation d'un Navigateur interne pour afficher l'Aperçu du Site en cours de construction permet d'obtenir les avantages suivants:

§l'Aperçu ne remplace pas le Site affiché dans la fenêtre du navigateur prédéfini éventuellement ouverte;

§l'Aperçu du Site en construction est mis à jour dans la fenêtre du Navigateur interne et n'entraîne pas l'ouverture de fenêtres ou sections différentes du Navigateur prédéfini.


Le moteur de recherche interne de WebSite X5

Comment fonctionne le moteur de recherche interne de WebSite X5

Approfondissements >

Comment fonctionne le moteur de recherche interne de WebSite X5

 Return to chapter overview
Montrer/Cacher le texte caché

WebSite X5 permet d'insérer dans En-tête / Pied de page du Modèle (voir, Modifier le modèle | Insérer champ de recherche) un Champ pour la Recherche dans les contenus du Site. En particulier, le Moteur est capable d'étendre la recherche dans les Pages, Images, Vidéos, Produits du Panier et Blog: les résultats de la recherche, rangés en fonction de leur pertinence, apparaissent dans des Pages créées automatiquement par le Programme.

Cliquez pour etendre/reduire Sur quoi est basé le Moteur de Recherche

Pour exploiter au mieux le moteur de recherche interne de WebSite X5, sachez que:

§Pages

Les éléments de la Page pris en considération par le moteur sont: Titre, Description et Mot clé (voir la fenêtre Propriétés de page |Général) mais aussi les Contenus Textuels.

§Images / Vidéos

Le Moteur de recherche prend en considération seulement les Images et les Vidéos qui ont étés ajoutés par l'option spécifique (voir, Objet Image | Plan du site ou Objet Vidéo/Son | Plan du site) et analyse toutes les informations introduites à ce but: Titre, Brève description et Position géographique (par ex., adresse, ville, etc.) pour les Images; Titre, Brève description, Catégorie, Mots-clé pour la recherche et Date de publication pour les Vidéos.

§Produits dans le Panier d'e-commerce

Le Moteur interne étend la recherche sur tous les Produits inclus dans le Panier d' e-commerce, en analysant le Nom/Code et la Description associée (voir, la fenêtre Paramètres de produit | Général).

§Blog

Toutes les Pages du Blog sont incluses dans le recherche; pour chaque Article il est capable d'analyser: Titre, Auteur, Catégorie, Balise, Brève description e Contenu.

§Zone Réservée

Les pages protégées par un nom utilisateur et un mot de passe (dans une Zone Réservée) ne sont pas prises en considération par le Moteur de Recherche interne si l'utilisateur n'a pas préalablement effectué la connexion.

§Pages non visibles

Les pages définies comme Non visibles dans le Menu de navigation font normalement partie de celles considérées par le Moteur de Recherche interne.

§Pour exclure une page de la recherche

Pour faire en sorte qu'une Page ne soit pas prise en considération par le Moteur de recherche interne, sélectionnez-la dans le Plan, rappelez la fenêtre Propriétés de page et dans la section Avancées décochez l'option Ajouter cette page au plan du site.

§Majuscules/Minuscules

Le moteur de recherche n'est pas sensible à la casse: c'est-à-dire qu'il ne fait pas la différence entre les lettres majuscules et minuscules.

Les différents paramètres pris en considération par le Moteur de recherche ont une importance différente: par exemple, les résultats trouvés dans les Titres des Pages ont une grande importance. Les résultats identifiés pour certains paramètres sont automatiquement multipliés par un facteur de correction avant d'être associés aux autres résultats.

Selon le numéro des résultats ainsi calculé on défini la pertinence, et donc la position, de chaque résultat présenté dans la Page qui affiche les résultats de la recherche.
Cliquez pour etendre/reduire Les Pages avec les résultats de la Recherche

Les pages affichant les résultats de la recherche sont automatiquement créées par le programme et elles proposent:

§le champ de recherche, déjà présent dans l'en-tête ou pied de page du Modèle;

§un menu latéral qui vous permet d'afficher les résultats relatifs aux Pages, aux Blogs, au E-commerce, aux Images ou aux Vidéos. À côté de chaque élément de ce menu est indiqué entre parenthèses le nombre de résultats de la recherche trouvés. S'il n'y a aucun résultat pour la recherche dans une catégorie spécifique, aucun élément du menu de la Page est ajouté.

§la liste des résultats de la recherche, selon leur indice de pertinence calculée.

Il est important de souligner que dans le cas des Pages avec les résultats de la recherche d'Images et Vidéo, il est possible de cliquer directement sur une image ou sur une vidéo pour l'ouvrir dans la Page du Site où il est inséré.

Le Moteur de recherche interne est très utile pour les Sites qui proposent en vente un riche catalogue de Produits: les Pages avec les résultats de la recherche présentent non seulement une description complète des Produits mais aussi le bouton Acheter pour permettre aux Clients de procéder immédiatement à la commande.

Les Pages avec les résultats de la recherche sont créés automatiquement par le programme: l'aspect graphique de ces Pages est déterminé par l'Étape 4 - Paramètres avancés, dans la section Styles et modèles et, pour ce qui regarde le Menu de Page, dans la section Style du menu de la page.


Modèle de Boîte (style CSS) dans WebSite X5

Approfondissements >

Modèle de Boîte (style CSS) dans WebSite X5

 Return to chapter overview

Dans WebSite X5 les Pages sont créées à l'aide d'une Grille et la mise en page peut être achevée en agissant sur les marges des Cellules, qu'on peut modifier par les options Marge extérieure et Marge intérieure présentes dans Style de cellule | Style.

Pour mieux comprendre ce que signifie Marge et réussir à agir avec précision sur la mise en page des contenus, il faut comprendre le Modèle de Boîte utilisé.

Quand vous écrivez le code d'une Page Web, tous les éléments HTML sont considérés comme des blocs (ou boîte) et l'ensemble des règles qui gère l'aspect visuel des éléments du bloc se nomme Modèle de Boîte. Chaque boîte comprend un certain nombre de composants de base, chacun modifiable avec les propriétés des CSS: marges, bordures, remplissages et contenu.

L'image suivante montre les parties du Modèle de Boîte:

Dans WebSite X5 la grille de mise en page proposée identifie une série de Cellules où vous pouvez insérer différents contenus: pour chaque Cellule, on applique le Modèle de Boîte illustré.

Ainsi les éléments sont:

§Contenu (zone verte): c'est le contenu inséré en faisant glisser l'un des Objets disponibles.

§Marge intérieure (zone rose): c'est l'espace entre le contenu actuel et le bord.

§Bordure: c'est le bord dessiné autour du contenu; l'aspect de ce bord peut-être défini à l'aide des options de la fenêtre Style de cellule.

§Marge extérieure (zone orange): c'est l'espace entre le bord et les lignes qui définissent la Grille de mise en page.

Compte tenu de ces définitions, l'espace entre deux Objets côte à côte (horizontalement ou verticalement) est égal à la somme des Marges Extérieures définies pour les Cellules contenant ces objets.


Le Panneau de Contrôle en ligne

Approfondissements >

Le Panneau de Contrôle en ligne

 Return to chapter overview

Pour chaque Site réalisé, WebSite X5 prépare automatiquement un Panneau de Contrôle en ligne permettant à l'administrateur d'exécuter des opérations comme: gérer les commentaires laissés par les utilisateurs aux posts du Blog ou les messages insérés sur le Livre d'Or, avoir certaines informations de diagnostic sur le Site.

Tous les utilisateurs insérés dans le groupe Administrateur dans la section Gestion des Accès disponible à étape 4 - Paramètres avancés peuvent accéder au Panneau de Contrôle.

Pour accéder au panneau de contrôle, il suffit de:

§Se connecter à l'URL http://www.monsite.fr/admin où http://www.monsite.fr est l'URL du Site.

§Saisir les données d'accès (Nom utilisateur et Mot de passe).

Une fois connecté, le Panneau de Contrôle présente différentes sections:

§Blog: permet de gérer les commentaires laissés par les utilisateurs en réponse aux Postes des Blog associés au Site web. (Comment gérer les commentaires aux Postes des Blog et le Livre d'Or à travers le Panneau de Contrôle en ligne.

§Livre d'Or: permet de gérer les messages laissés par les utilisateurs sur le Livre d'Or inséré dans le site Web à travers l' Objet Livre d'or.

§WebSite Test: permet d'afficher certaines informations de diagnostic relatives au Site Web et au Serveur où il est publié. Dans le détail les contrôles effectués concernent:

-Version de PHP installée - Afin que l'envoi de e-mail prévu pour l'Objet Formulaire d'envoi d'email et le Panier virtuel e-commerce fonctionne correctement, il est nécessaire que, outre l'accès aux Pages Protégées par Nom utilisateur et Mot de passe, le serveur supporte le langage PHP. Le programme vérifie donc si le serveur offre ce support et, si oui, il indique la version PHP supportée.

-Support des sessions - En plus du support pour le PHP, pour que l'accès aux Pages Protégées soit admis seulement après la saisie correcte des données d'accès, le serveur doit aussi supporter les sessions.

-Dossier avec accès par écriture - Pour pouvoir stocker et gérer les commentaires aux Postes du Blog et du Objet Livre d'or il faut indiquer un dossier sur le Serveur où il est possible d'accéder en écriture à travers les options appropriées. Le programme vérifie d'abord que le dossier avec accès en écriture indiqué existe et, si oui, si ce dossier autorise l'écriture des données.

-Support de MySQL et paramétrages de la base de données - Au moment de définir un Objet Formulaire d'envoi d'email vous pouvez indiquer comme méthode d'envoi des données "Envoyer les données à une base de données" (voir Objet Formulaire d'envoi d'email | Envoi): dans ce cas, vous devez fournir les paramètres pour se connecter à la Base de Données sur le Serveur à utiliser. Le programme vérifie ensuite que le Serveur supporte MySQL et, si oui,que les paramètres permettent réellement d'accéder et de travailler sur la Base de Données.


Informations et Support

Informations et Support

c'est un produit Incomedia

www.websitex5.com

www.incomedia.eu

Copyright 2013 Incomedia. Tous droits réservés.

WebSite X5 utilise DotNetZip qui est couvert par la Licence Ms-PL (Microsoft Public License)

WebSite X5 utilise Cef qui est couvert par la Licence BSD 3.

WebSite X5 utilise Cef Sharp qui est couvert par la Licence BSD 2.

Pour plus d'informations et pour le support technique, visitez le site: www.websitex5.com/help


License BSD 3

License BSD 3

Copyright (c) 2008-2012 Marshall A. Greenblatt. Portions Copyright (c)

2006-2009 Google Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the names of its contributors may be used to endorse

or promote products derived from this software without specific prior

written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


License BSD 2

License BSD 2

Copyright (c) 2012, Anthony Taranto.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the name CefSharp nor the names of its contributors

may be used to endorse or promote products derived from this software

without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


Microsoft Public License (Ms-PL)

Microsoft Public License (Ms-PL)

 Return to chapter overview

This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software.

1. Definitions

The terms "reproduce," "reproduction," "derivative works," and "distribution" have the same meaning here as under U.S. copyright law.

A "contribution" is the original software, or any additions or changes to the software.

A "contributor" is any person that distributes its contribution under this license.

"Licensed patents" are a contributor's patent claims that read directly on its contribution.

2. Grant of Rights

(A) Copyright Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce its contribution, prepare derivative works of its contribution, and distribute its contribution or any derivative works that you create.

(B) Patent Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free license under its licensed patents to make, have made, use, sell, offer for sale, import, and/or otherwise dispose of its contribution in the software or derivative works of the contribution in the software.

3. Conditions and Limitations

(A) No Trademark License- This license does not grant you rights to use any contributors' name, logo, or trademarks.

(B) If you bring a patent claim against any contributor over patents that you claim are infringed by the software, your patent license from such contributor to the software ends automatically.

(C) If you distribute any portion of the software, you must retain all copyright, patent, trademark, and attribution notices that are present in the software.

(D) If you distribute any portion of the software in source code form, you may do so only under this license by including a complete copy of this license with your distribution. If you distribute any portion of the software in compiled or object code form, you may only do so under a license that complies with this license.

(E) The software is licensed "as-is." You bear the risk of using it. The contributors give no express warranties, guarantees or conditions. You may have additional consumer rights under your local laws which this license cannot change. To the extent permitted under your local laws, the contributors exclude the implied warranties of merchantability, fitness for a particular purpose and non-infringement.


print_copyright

print_copyright

© Copyright 2013 Incomedia. All rights reserved.

Le informazioni contenute in questo manuale possono essere soggette a modifiche senza alcun preavviso. Nessuna parte di questo manuale può essere riprodotta o trasmessa in qualsiasi forma o con qualsiasi mezzo, elettronico o meccanico, per qualsiasi scopo, senza l'espresso consenso scritto di Incomedia.

Si ricorda che filmati, suoni o immagini che si desidera utilizzare nei progetti possono essere soggetti a diritto d'autore. L'inserimento non autorizzato di tali materiali potrebbe, dunque, rappresentare una violazione dei diritti di autore ed è bene accertarsi di poterne fare uso liberamente o ottenere i permessi necessari dai rispettivi autori o dagli enti preposti.

Incomedia, WebSite X5, WebSite X5 Evolution sono marchi registrati di Incomedia s.r.l. Altri marchi o nomi di prodotti citati nel presente documento sono marchi o marchi registrati dei rispettivi proprietari.

Scritto e impaginato da Incomedia s.r.l.